jQuery動態加載select下拉列表

需求說明：

　　以前使用的select下拉列表都是靜態的，select 的option數據都是寫死的。現在項目中的select需要根據不同的場景使用不同的數據，解決方式就是動態加載option數據。

代碼部分：

下面步驟介紹了如何從數據庫獲取數據，並動態的在前端顯示。

步驟一：jsp頁面靜態的select：

<div>
　　<select id="selectSM">
　　　　<option>選擇A</option>
　　　　<option>選擇B</option>
　　　　<option>選擇C</option>
　　</select>
</div>

　　注意：

　　　　1、靜態的select在某些場景下使用是沒有問題的。但是在產品不同的需求時，動態select更能勝任其多樣性。

　　　　2、select有多種寫法，這里是最簡單的。

步驟二：jQuery通過ajax請求獲取動態的數據，並在jsp頁面顯示。

function IninDepart(){
　　$("#selectSM").remove();//清空select列表數據
　　var state = 1;
　　$.ajax({
　　　　type : "POST",
　　　　url : "<%=basePath%>/getItemDepartList.do",
　　　　dataType : "JSON",
　　　　data : {},
　　success : function(msg) 
　　{

　　　　$("#selectSM").prepend("<option value='0'>請選擇</option>");//添加第一個option值
　　　　for (var i = 0; i < msg.rows.length; i++) {

　　　　//如果在select中傳遞其他參數，可以在option 的value屬性中添加參數
　　　　//$("#selectSM").append("<option value='"+msg.rows[i].id+"'>"+msg.rows[i]+"</option>");

　　　　$("#selectSM").append("<option>"+msg.rows[i]+"</option>");
　　}

　　},error:function(){
　　alertLayer("獲取數據失敗","error");
　　}
　　});
}

　　注意：這里使用的是jQuery、ajax，其他方式也可以實現。

步驟三：后台數據的處理。

public JSONObject getItemDepartList(HttpServletRequest request) throws Exception{

　　//查詢select數據
　　List<Map<String, Object>> list = appServices.getAppList();
　　System.out.println("list::::::::" + list);
　　//獲取數據存放到數組
　　String[] depart = null;
　　for (Map<String, Object> map : list) {
　　　　for (String k : map.keySet()) {
　　　　　　depart = ((String) map.get(k)).split(",");

　　　　　　System.out.println("depart::::::::" + depart);
　　　　　　}
　　　　}
　　//去除數組中重復數據，存放到list
　　List<String> strList = new ArrayList<String>();
　　for (int i=0; i<depart.length; i++) { 
　　　　if(!strList.contains(depart[i])) { 
　　　　strList.add(depart[i]); 
　　} 
}

　　System.out.println("strList::::::::" + strList);
　　jsonObject.put("rows", strList);
　　return jsonObject;

}

　　注意：由於后台返回數據的問題，需要對數據進行截取並去除重復數據。如果沒有這個需求，可以直接向前端返回一個數組或list即可。下面是不同數據的控制台輸出：

　　　　list::::::::[{service_depart=A,B,C,D,E,A,C,D,D,E}]
　　　　depart::::::::[Ljava.lang.String;@41fc702b
　　　　strList::::::::[A, B, C, D, E]

步驟四：sql查詢語句，這里是把不同字段的值進行拼接，返回到controller中的list中。　

SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名稱)) AS 字段名稱或別名 FROM 表名

步驟五：這里捎帶說一下，如何獲取select下拉列表選擇的值　

　//select 的change事件用了獲取下拉列表的值
　$(document).on("change","#selectSM",function(){
　　　　//獲取選擇的值
　　　　var condition = $(this).val();
　　　　//其他操作
　　});

總結：不同的需求對應着不同的數據處理和顯示方式。以及不同的代碼實現方式這里介紹我自己的觀點。