几种常用的下拉列表的动态加载和选中写法

前端开发中，常用的几种下拉框方式，包括：easyui中的combobox，combo，html中的select标签,struts2标签：。下面是我总结的这几种下拉框的动态加载和动态选中的写法，以防后面再遇到。

一、combobox，combobox:使用easyui插件远程请求数据方式

   combobox，combobox:使用easyui插件远程请求数据方式
    先定义input标签:    
 

 ${"#xx"}.combobox({
	 valueField:'id',    
    	 textField:'text',
	 url:"请求数据的路径"，
	 queryParams：{"age" : 25, "order" : "desc"}//带额外的参数，当然也可以在url后面拼接参数
    });	

    注意：请求的数据返回的数据未json格式，格式如下：
[{    
                 "id":1,    
                 "text":"text1"   
                },{    
                 "id":2,    
                 "text":"text2"   
                },{    
                 "id":3,    
                 "text":"text3",    
                 "selected":true   
                },{    
                 "id":4,    
                 "text":"text4"   
                },{    
                 "id":5,    
                 "text":"text5"   
                }]  
      在后台分装的数据： 

		List  list = new ArrayList()//存放查询的数据
                JSONArray jsonArr = new JSONArray();
		JSONObject jsonObj;
		jsonObj = new JSONObject();
		jsonObj.put("id", "");
		jsonObj.put("text", "全部");
		jsonObj.put("selected", true);
		jsonArr.add(jsonObj);
		if(null!=list){
			for(int i=0;i

   动态选择选项，使用$("#xx").combobox('select','要选中的id');
  此种方式样式相对于html或s标签中的样式美观一点，而且方便，combo与combobox相似，不再赘述。    

二.使用html中的使用select标签 ：

  2.1 html标签结合js 

  
   选项1
   

    然后使用javascript动态加载数据

  document.getElementById("xx").options.add(new Option("mytest","1"));//添加
  document.getElementById("xx").remove("1");//删除  这种适合适合添加的数据在js中获取方便的。

   

  如果是通过action传到前台的数据是list，使用jquery不容易解析，因为jquery一般解析的是xml或json数据，所以
  如果使用上述方法动态添加下拉选项的话，要在后台将数据转成json数据，

2.2 由于html没有循环功能，因此如果不在javascript中动态添加的话就无法实现， 但是可以我们可以借助JSTL（c标签） 标签中的循环list

  首先不要忘记引入jstl标签
  

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 
           选项一
     
          
      
 

特别注意（网上关于设置text为pxx的项选中的用法为：$("#test").find("option[text='pxxtext']").attr("selected",true)，亲测不起作用，暂时不用）。 

 三、使用也可以使用struts2标签（s标签）

    同样不能忘记下引入s标签

  

<%@taglib prefix="s" uri="/struts-tags"%>

 
 

四、无论使用html标签还是s标签，他们的动态选中js代码方式一样

动态选中js代码：
 1、设置value为pxx的项选中（value相当于id）

$("#test").val("pxxid");

2、根据选项的text选中

var options=$("#test").find("option");
		$.each(options,function(i,option){
			if($(option).attr("value")==你要选中的文本值){
				$(option).attr("selected",true);
			}
		});

最后注意，当你使用了上述方法不起作用时，请注意你使用的id值是否有重复存在的。以防无法定位标签。