js 下拉层级多选_Jquery实现select二级联动多选下拉菜单

前言

平时虽然也有写前端，但是对于一些复杂的功能实现仍是一知半解。这次项目需要实现一个多选下拉菜单，并且该菜单要和上级下拉菜单保持联动。更加麻烦的是，我需要完成以下操作，以省、市二级联动菜单为例：

选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、邢台、保定

再选择河南省 >> 二级菜单显示河南省所有市 >> 多选其中驻马店、郑州

...

重复以上步骤

也就是说我要同时选择多个省内的多个市，而简单的二级联动菜单貌似无法完成这个步骤，所以便有了如下方案：

demo.png

在点击添加后，在下拉菜单结果中，会保存已经被选中的选项。之后，我们便可以修改大类中的选项，实现小类中的再次多选

实现代码

JS代码

function getSelectVal() {

//获取后台json数据

$.getJSON("server.php", {

bigname: $("#bigname").val()

}, function(json) {

var smallname = $("#smallname");

$("option", smallname).remove(); //清空原有的选项

$.each(json, function(index, array) {

var option = "" +