在開發中經常用到bootstrap外掛 這幾天發現了一個multiselect外掛 選擇框外掛 很好用 整理一下Demo 供大家參考

在專案中用到選擇框一般涉及到級聯選擇操作 資料是從json檔案獲取或者從資料庫讀取出資料

首先 使用這個外掛需要匯入一系列依賴的js檔案和css檔案 這個可以從官方demo獲取

然後準備json資料 先讀取本地json 做一個省 縣 市 的篩選

json檔案讀者下去自備

HTML程式碼

<!-- json檔案級聯操作 -->
  				<br><br>
  				<div  style="width:1000px">
  				
  				　 <label style="float: left;">省</label>
  					<select multiple="multiple" style="width:150px" id="sel_jilian_1" > 
				       		<option value="hn" >河南</option>
				       		<option value="hb">河北</option>
				    </select>
				    <label >市</label>
  					<select multiple="multiple" style="width:150px" id="sel_jilian_2">
				    </select>
				     <label >縣</label>
  					<select multiple="multiple" style="width:150px" id="sel_jilian_3">
				    </select>
  				
  				</div>
 

第一個選擇省是寫好的資料 （讀者也可以自定義 新增json裡的資料 動態新增）主要注意value的值 一會根據這個值選擇json檔案

然後寫js 

js思路是：這個multiselect外掛提供的有選擇框選擇觸發的事件，onClick 事件 選擇資料後呼叫 然後先選擇省 獲取選擇的是哪個省 根據這個值 在選擇呼叫哪一個json檔案 把資料動態新增到下一個選擇框中 新增之前 要先清空一下選擇框裡的資料 這個是為了防止多次選擇省後面的資料沒有清空。

詳情看下面程式碼 訪問資料庫時 可以參考我註釋的那段程式碼 jquery的ajax方法 訪問資料庫 根據訪問返回的json資料進行頁面動態新增資料

<script type="text/javascript">
$("#sel_jilian_1").multipleSelect({
    	
    		placeholder: "---選擇省---",
    		selectAll: false,
    		single:true,
    		onClick:function(view){
    			/* alert(view.value);
    			var a ="sheng_"+view.value+".json";
    			alert(a); */
    			var id="sel_jilian_2";
    			var xz_id="sel_jilian_1"
    			view_json(view,id,xz_id);
    			
    		}
    		
    	});
    	
    $("#sel_jilian_2").multipleSelect({
    		placeholder: "---選擇市---",
    		selectAll: false,
    		single:true,
    		onClick:function(view){
    			/* alert(view.value);
    			var a ="sheng_"+view.value+".json";
    			alert(a); */
    			var id="sel_jilian_3";
    			var xz_id="sel_jilian_2"
    			view_json(view,id,xz_id);
    		}
    	});
    	
    $("#sel_jilian_3").multipleSelect({
    	
    		placeholder: "---選擇縣---",
    		selectAll: false,
    		single:true
    	});
	
	function view_json(view,id,xz_id){
    	//alert("選中的值"+view.html);
    	alert("選中的值: " + $("#"+xz_id).multipleSelect('getSelects', 'text'));
    	//var b=[{"id":"1","uname":"龔世贇"},{"id":"2","uname":"靳鎧歌"},{"id":"3","uname":"沙家聰"}];
    	var json=view.value+".json";
    		//清空內容 
    	   $("#sel_jilian_3").empty().multipleSelect("refresh");
    	   $("#sel_jilian_2").empty();
    	   
    	   //讀取本地json檔案
    		$.getJSON(json, function (data){
			     $.each(data, function (infoIndex, info){
			         $opt = $("<option />", {
		                    value: info["id"],
		                    text: info["uname"]
		                });
		              $("#"+id).append($opt).multipleSelect("refresh");
			      })
		    }) 
		    
		    //連線資料庫獲取伺服器中的json檔案  沒有寫action檔案 沒寫資料庫獲取不了資料庫 
		     /* $.ajax({  
					        //請求方式為get  
					        type:"POST",  
					        //json檔案位置  
					        url:"getJSON.action",  
					        //返回資料格式為json  
					        dataType: "json",  
					        //請求成功完成後要執行的方法  
					        success: function(data){  
					            //使用$.each方法遍歷返回的資料date,插入到id為#result中  
					            $.each(data,function(i,item){  
					               //alert(item.id); 
					                $opt = $("<option />", {
						                    value: item.id,
						                    text: item.uname
						                });
						            $("#"+id).append($opt).multipleSelect("refresh");
					            })  
					        }  
					    })   */
		    
	}

  </script>
 

By it_noone 一個進階中的碼農