前言
平时虽然也有写前端，但是对于一些复杂的功能实现仍是一知半解。这次项目需要实现一个多选下拉菜单，并且该菜单要和上级下拉菜单保持联动。更加麻烦的是，我需要完成以下操作，以省、市二级联动菜单为例：
选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、邢台、保定
再选择河南省 >> 二级菜单显示河南省所有市 >> 多选其中驻马店、郑州
...
重复以上步骤
也就是说我要同时选择多个省内的多个市，而简单的二级联动菜单貌似无法完成这个步骤，所以便有了如下方案：
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 = "" + array['title'] + "";
smallname.append(option);
});
});
}
// 选择上级菜单选项触发事件
$(function() {
getSelectVal();
$("#bigname").change(function() {
getSelectVal();
});
});
//点击添加，获取选中选项的value和text
$(document).ready(function() {
$("#add").click(function() {
var result = $("#result");
$("#smallname option:selected").each(function(){
console.log($(this).val() + $(this).text());
var option = "" + $(this).text() + "";
result.append(option);
});
});
});
大类：
编程技术
社交网站
好吃的
小类：
添加
结果：
模拟数据库返回数据的后台文件
$bigid = $_GET["bigname"];
if(isset($bigid)){
if($bigid == 1){
$select = array(
'0' => ['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);
}
