bootstrap multiselect插件级联选择框操作 内容从json文件获取

在开发中经常用到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>

此代码 可进行优化一下 将onClick事件更改为onChange事件 输入框内容改变时才会访问json文件 否则就不访问json文件了。谢谢阅读。

By it_noone 一个进阶中的码农