java 下拉框使用json_使用JSON来做数据传输的动态下拉列表

之前也写过一个使用XML文件来传送数据的动态下拉列表，前段时间也在使用JSON来作为AJAX的数据传输介质。相关JSON的文章请参看http://j2ee.blog.sohu.com/65388567.html。今天就来说下使用JSON来做动态下拉列表的实现。

动态下拉列表的原理其实很简单的，当某一下拉列表触发了onchange事件，然后使用AJAX在后台向服务器异步请求数据，最后将服务器返回的数据进行解析后动态添加到指定的select上即可！

首先来看后台的数据输出，我们假设服务器传送给客户段的JSON数据格式为如下：

{

"options" : [

{"value" : 值,"text" : 文本},

{"value" : 值,"text" : 文本},

{"value" : 值,"text" : 文本}

]

}

其中options是整个JSON对象的标识符，它是一个数组，该数组中的每一个值表示一个select中的option，当然该值也是一个对象了，有两个属性，一个是value，一个是text，分别对应option中的value和显示的text值。

有了数据格式，那么客户端和服务器端进行交流就方便很多了。我们来先写客户端的JS方法。这里我是提供一个静态的实用类Select，专门针对select元素的操作方法，如下：

/**-----------------------------------------------------------------------

* ------------------------针对select操作的实用Select类-------------------

* -----------------------------------------------------------------------

*/

function Select(){};

/**

* 根据指定的JSON对象来生成指定的select的options项(清除原来的options).

*/

Select.create = function(/*string*/selectId,/*json object*/json) {

Select.clear(selectId);

Select.add(selectId, json);

};

/**

* 该方法同create,只不过是在原来的基础上进行追加

*/

Select.add = function(/*string*/selectId,/*json object*/json) {

try {

if (!json.options) return;

for (var i = 0; i < json.options.length; i ++) {

Select.addOption(selectId,json.options[i].value,json.options[i].text);

}

} catch (ex) {

base.alert('设置select错误：指定的JSON对象不符合Select对象的解析要求！');

}

};

/**

* 创建一个options并返回

*/

Select.createOption = function(/*string*/value, /*string*/text) {

var opt = document.createElement('option');

opt.setAttribute('value', value);

opt.innerHTML = text;

return opt;

};

/**

* 给指定的select添加一个option,并返回当前option对象

*/

Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {

var opt = Select.createOption(value, text);

$(selectId).appendChild(opt);

return opt;

};

/**

* 获取指定select的当前被选中的options对象，如果为多选且有多个被选中则返回数组.

*/

Select.getSelected = function(/*string*/selectId) {

var slt = $(selectId);

if (!slt) return null;

if (slt.type.toLowerCase() == "select-multiple") {

var len = Select.len(selectId);

var result = [];

for (var i = 0; i < len; i ++) {

if (slt.options[i].selected) result.push(slt.options[i]);

}

return result.length > 1 ? result : (result.length == 0 ? null : result[0]);

} else {

var index = $(selectId).selectedIndex;

return $(selectId).options[index];

}

};

/**

* 使指定索引位置的option被选中.从0开始.

*/

Select.select = function(/*string*/selectId, /*int*/index) {

var slt = $(selectId);

if (!slt) return false;

for (var i = 0; i < slt.options.length; i ++) {

if (index == i) {

slt.options[i].setAttribute("selected", "selected");

return true;

}

}

return false;

};

/**

* 选中指定的select的所有option选项，如果支持多选的话

*/

Select.selectAll = function(/*string*/selectId) {

var len = Select.len(selectId);

for (var i = 0; i < len; i ++) Select.select(selectId, i);

};

/**

* 获取指定select的总的options个数

*/

Select.len = function(/*string*/selectId) {

return $(selectId).options.length;

};

/**

* 清除select中满足条件的options，如果没有指定处理方法则清除所有options项

*/

Select.clear = function(/*string*/selectId, /*function*/iterator) {

if (typeof(iterator) != 'function') {

$(selectId).length = 0;

} else {

var slt = $(selectId);

for (var i = slt.options.length - 1; i >= 0; i --) {

if (iterator(slt.options[i]) == true) slt.removeChild(slt.options[i]);

}

}

};

/**

* 复制指定的select的option对象到另外一指定的select对象上.如果指定了处理

* 函数，那么只有返回true时才会copy.

* 函数iterator参数：当前处理的option对象、目标select的options数组

*/

Select.copy = function(/*string*/srcSlt, /*string*/targetSlt, /*function*/iterator) {

var s = $(srcSlt), t = $(targetSlt);

for (var i = 0; i < s.options.length; i ++) {

if (typeof(iterator) == 'function') {

if (iterator(s.options[i], $(targetSlt).options) == true) {

t.appendChild(s.options[i].cloneNode(true));

}

} else {

t.appendChild(s.options[i].cloneNode(true));

}

}

};

那么在回调方法中就可以只要来调用：

……

var jsonString = xmlHttp.responeText; // 获取服务器返回的json字符串

var jsonObj = null;

try {

jsonObj = eval('(' + jsonString + ')'); // 将json字符串转换成对象

} catch (ex) {

return null;

}

Select.create("你的select的ID", jsonObj); // 执行option的添加

……

在Select中提供了很多实用的JS方法来方便操作select对象，我们这里只使用其中的create方法。客户端有了JS，我们现在来做服务器端的字符串输出。这里我们用到了JSONLib库，该库可以很方便的来从现有的javaBean或其他集合对象中来转换成json字符串。我们这里也提供一个公用类如下：

package common.utils.json;

import java.util.HashMap;

import java.util.Iterator;

import java.util.List;

import java.util.Map;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

import org.apache.commons.beanutils.BeanUtils;

import org.apache.log4j.Logger;

/**

* 下拉列表的JSON对象转换.

* 转换后的字符串是如下格式：

* {"options" : [ {"value" : 值,"text" : 文本},

*       {"value" : 值,"text" : 文本},

*       ……

*       {"value" : 值,"text" : 文本}

*              ]

* }

* 前台将利用两个JS进行转换和生成：

* BaseClass对象的json方法将返回的字符串转换成对象；

* Select对象的create/add方法将把转换后的对象添加到指定的select上去。

*

* @author 铁木箱子

*

*/

public class SelectJSON

{

/**

* Logger for this class

*/

private static final Logger log = Logger.getLogger(SelectJSON.class);

/**

* 从指定的map对象中获取要设置的值后组装成返回给前台的JSON对象字符串.

*

* 存储在map中的key-value应该是option中的value和text，即如下的option：

* 你好

* 应该使用如下的map对象：

* map.put("hello", "你好");

* 注意使用map对象相同key值的将会被后设置的给覆盖！

*

* @param map

* @return

*/

public static String fromMap(Map map)

{

Iterator it = map.keySet().iterator();

JSONArray options = new JSONArray();

while (it.hasNext()) {

JSONObject option = new JSONObject();

String key = (String)it.next();

option.put("value", key);

option.put("text", map.get(key));

options.put(option);

}

JSONObject result = new JSONObject();

result.put("options", options.toString());

return result.toString();

}

/**

* 从指定的list中获取要设置出去JSON对象.

*

* 存放在list中的对象应该是满足JavaBean规范的POJO对象，同时还要指定该对象中的

* 哪个属性作为option的value，哪个属性作为option的text。比如有如下一个JavaBean

* ，其部分属性如下：

* ……

* public String getOptValue()

* {

*     return this.optValue;

* }

* public String getOptText()

* {

*     return this.optText;

* }

* ……

* 如果我们想用optValue作为option的value属性，而optText作为option的text值，那么

* 我们就应该传递参数分别是：optValue, optText.

*

* @param list

* @param valueProp

* @param textProp

* @return

*/

public static String fromList(List list, String valueProp, String textProp)

{

JSONArray options = new JSONArray();

try {

for (Object obj : list) {

JSONObject option = new JSONObject();

String value = BeanUtils.getProperty(obj, valueProp);

String text = BeanUtils.getProperty(obj, textProp);

option.put("value", value);

option.put("text", text);

options.put(option);

}

} catch (Exception ex) {

throw new RuntimeException(ex);

}

JSONObject result = new JSONObject();

result.put("options", options.toString());

return result.toString();

}

public static void main(String[] args)

{

// map 测试

Map tt = new HashMap();

tt.put("value1", "text1");

tt.put("value2", "text2");

tt.put("value3", "text3");

log.info(SelectJSON.fromMap(tt));

}

}

在类SelectJSON中提供了两个方法，一个是从map中来获取并转换成json字符串，还一个就是从list中的对象来获取，这个方法需要使用BeanUtils工具来辅助获取JavaBean对象中的指定属性。当然了，你可以可以写其他方便发辅助方法来达到这样的效果。

比如我们在上面的SelectJSON类中的测试，会输出：

{"options":[{"value":"value1","text":"text1"},{"value":"value2","text":"text2"},{"value":"value3","text":"text3"}]}

然后我们再调用上面提到的JS类Select进行操作就可以了，注意，在使用Select类进行操作前，比如先转换服务器返回的字符串为js对象，即使用eval来执行返回字符串即可！好了，关于使用json来做动态下拉列表就说到这里咯，如有问题，欢迎一起交流~~~