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 一个进阶中的码农