js下拉层级多选_Jquery实现select⼆级联动多选下拉菜单前⾔
平时虽然也有写前端，但是对于⼀些复杂的功能实现仍是⼀知半解。这次项⽬需要实现⼀个多选下拉菜单，并且该菜单要和上级下拉菜单保持联动。更加⿇烦的是，我需要完成以下操作，以省、市⼆级联动菜单为例：
选择河北省 >> ⼆级菜单显⽰河北省所有市 >> 多选其中⽯家庄、邢台、保定
再选择河南省 >> ⼆级菜单显⽰河南省所有市 >> 多选其中驻马店、郑州
...
重复以上步骤
也就是说我要同时选择多个省内的多个市，⽽简单的⼆级联动菜单貌似⽆法完成这个步骤，所以便有了如下⽅案：
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() {
js导航栏下拉菜单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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。