Jquery实现select二级联动多选下拉菜单Jquery实现select二级联动多选下拉菜单

021-64391578/13361801686

关注迅速公众平台

企业电话：021-64391578

Jquery实现select二级联动多选下拉菜单

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

选择河北省 >> 二级菜单显示河北省所有市 >> 多选其中石家庄、邢台、保定
    再选择河南省 >> 二级菜单显示河南省所有市 >> 多选其中驻马店、郑州 ... 重复以上步骤

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

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