前言

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

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

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

...

重复以上步骤

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

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);

}