前言

平時雖然也有寫前端，但是對于一些復雜的功能實現仍是一知半解。這次項目需要實現一個多選下拉菜單，并且該菜單要和上級下拉菜單保持聯動。更加麻煩的是，我需要完成以下操作，以省、市二級聯動菜單為例：

選擇河北省 >> 二級菜單顯示河北省所有市 >> 多選其中石家莊、邢臺、保定

再選擇河南省 >> 二級菜單顯示河南省所有市 >> 多選其中駐馬店、鄭州

...

重復以上步驟

也就是說我要同時選擇多個省內的多個市，而簡單的二級聯動菜單貌似無法完成這個步驟，所以便有了如下方案：

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

}