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

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

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

   combobox，combobox:使用easyui插件远程请求数据方式
    先定义input标签:     <input id="xx" />
 

 ${"#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<list.size();i++){jsonObj = new JSONObject();jsonObj.put("id", list.get(i).xx);//对应的idjsonObj.put("text", list.get(i).getOpNo());//对应的textjsonObj.put("selected", false);jsonArr.add(jsonObj);}}return jsonArr.toString();

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

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

  2.1 html标签结合js 

  <select id="xx">   <option value="0">选项1</option>  </select> 

   然后使用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标签） 标签中的<c:forEach></c:forEach>循环list

  首先不要忘记引入jstl标签
  

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

 <select  id="test" >           <option value="1">选项一</option>     <c:forEach items="${bopTmDataDictionaryList}" var="e">          <option value="${e.id}"><c:out value="${e.chName}"/></option>      </c:forEach> </select>

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

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

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

  

<%@taglib prefix="s" uri="/struts-tags"%> <s:select id="xx" name="xx" list="从后台传过来的list集合" headerKey="默认的第一个选项的id" headerValue="默认的第一个选项的text"listKey="chName" listValue="chName" value='' > </s:select>

四、无论使用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值是否有重复存在的。以防无法定位标签。