Jquery实现select二级联动多选下拉菜单

---

前言

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

    选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、邢台、保定
    再选择河南省 >> 二级菜单显示河南省所有市 >> 多选其中驻马店、郑州
    ...
    重复以上步骤

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

demo.png

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

---

实现代码

JS代码

    

        

            大类：
            
                编程技术
                社交网站
                好吃的
            
        
        

            小类：
            
            
        
        

            添加
        
        

            结果：
            
            
        
    
 

    

模拟数据库返回数据的后台文件

 ['id' => 1,'title' => 'JS'], 
        '1' => ['id' => 2,'title' => 'PHP'],
        '2' => ['id' => 3,'title' => 'C++'],
        '3' => ['id' => 4,'title' => 'LUA'],
        '4' => ['id' => 5,'title' => 'CSS'],
    );
  }else if($bigid == 2){
    $select = array(
        '0' => ['id' => 1,'title' => '人人'], 
        '1' => ['id' => 2,'title' => 'FACEBOOK'],
        '2' => ['id' => 3,'title' => '微博'],
        '3' => ['id' => 4,'title' => '朋友圈'],
        '4' => ['id' => 5,'title' => '空间'],
    );
  }else if($bigid == 3){
    $select = array(
        '0' => ['id' => 1,'title' => '牛肉面'], 
        '1' => ['id' => 2,'title' => '土豆粉'],
        '2' => ['id' => 3,'title' => '盖饭'],
        '3' => ['id' => 4,'title' => '火锅'],
        '4' => ['id' => 5,'title' => '大便'],
    );
  }
  echo json_encode($select); 
}