php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单
前言
平時雖然也有寫前端，但是對于一些復雜的功能實現(xiàn)仍是一知半解。這次項目需要實現(xiàn)一個多選下拉菜單，并且該菜單要和上級下拉菜單保持聯(lián)動。更加麻煩的是，我需要完成以下操作，以省、市二級聯(lián)動菜單為例：
選擇河北省 >> 二級菜單顯示河北省所有市 >> 多選其中石家莊、邢臺、保定
再選擇河南省 >> 二級菜單顯示河南省所有市 >> 多選其中駐馬店、鄭州
...
重復以上步驟
也就是說我要同時選擇多個省內的多個市，而簡單的二級聯(lián)動菜單貌似無法完成這個步驟，所以便有了如下方案：
demo.png
在點擊添加后，在下拉菜單結果中，會保存已經被選中的選項。之后，我們便可以修改大類中的選項，實現(xiàn)小類中的再次多選
實現(xiàn)代碼
JS代碼
function getSelectVal() {
//獲取后臺json數(shù)據(jù)
$.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);
});
});
}
// 選擇上級菜單選項觸發(fā)事件
$(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);
});
});
});
大類：
編程技術
社交網站
好吃的
小類：
添加
結果：
模擬數(shù)據(jù)庫返回數(shù)據(jù)的后臺文件
$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);
}
總結
以上是生活随笔為你收集整理的php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 车险提前多久续保
- 下一篇： zblog php和asp功能,ZBlo