Jquery实现select二级联动多选下拉菜单
2016-07-19 本文已影响17140人
Rotten_Pencil
前言
平时虽然也有写前端，但是对于一些复杂的功能实现仍是一知半解。这次项目需要实现一个多选下拉菜单，并且该菜单要和上级下拉菜单保持联动。更加麻烦的是，我需要完成以下操作，以省、市二级联动菜单为例：
选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、邢台、保定
再选择河南省 >> 二级菜单显示河南省所有市 >> 多选其中驻马店、郑州
...
重复以上步骤
也就是说我要同时选择多个省内的多个市，而简单的二级联动菜单貌似无法完成这个步骤，所以便有了如下方案：
demo.png
在点击添加后，在下拉菜单结果中，会保存已经被选中的选项。之后，我们便可以修改大类中的选项，实现小类中的再次多选
实现代码
JS代码
<!DOCTYPE html>
<script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript">
function getSelectVal() {
//获取后台json数据
$.getJSON("server.php", {
bigname: $("#bigname").val()
}, function(json) {
var smallname = $("#smallname");
$("option", smallname).remove(); //清空原有的选项
$.each(json, function(index, array) {
var option = "<option value='" + array['id'] + "'>" + array['title'] + "</option>";
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 = "<option value='" + $(this).val() + "' selected=\"selected\">" + $(this).text() + "</option>";
result.append(option);
});
});
});
</script>
<html lang="">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<label>大类：</label>
<select name="bigname" id="bigname" class="form-control">
<option value="1">编程技术</option>
<option value="2">社交网站</option>
<option value="3">好吃的</option>
</select>
</div>
<div class="col-sm-3">
<label>小类：</label>
<select name="smallname[]" id="smallname" multiple="" class="form-control">
</select>
</div>
<div class="col-sm-3">
<button type="button" id="add" class="btn btn-success">添加</button>
</div>
<div class="col-sm-3">
<label>结果：</label>
<select name="result[]" id="result" multiple="" class="form-control">
</select>
</div>
</div>
</div>
</body>
</html>
模拟数据库返回数据的后台文件
<?php
$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);
}
