bootstrap selectpicker下拉菜单联动（改变下拉菜单内容另一个跟着改变）

最新推荐文章于 2022-10-04 21:41:19 发布

Answerlzd

最新推荐文章于 2022-10-04 21:41:19 发布

阅读量3.7k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap selectpicker 动态修改联动

本文链接：https://blog.csdn.net/Answer3664/article/details/100065549

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、html页面准备两个下拉菜单：

<span style="font-size:16px;">分公司：</span>
<select class="selectpicker" id="selectBranchOffice">
    <option value="全部">全部</option>
    <option value="一分公司">一分公司</option>
    <option value="二分公司">二分公司</option>
    <option value="三分公司">三分公司</option>
    <option value="四分公司">四分公司</option>
</select>

<span style="font-size:16px;">车队：</span>
<select class="selectpicker" id="selectFleet"></select>

二、js实现下拉菜单联动

现在要完成的功能是：当选择不同的分公司时，车队下拉菜单下填充每个分公司对应的车队。

js代码：

//所选分公司改变
$('#selectBranchOffice').on("change", function () {
    //获取所选值
    var selectedValue = $('select#selectBranchOffice option:selected').text();
    //先清空方向下拉菜单的option
    document.getElementById("selectFleet").options.length = 0;
    //根据分公司选择，查询对应的车队
    $.ajaxSettings.async = false; //防止objson出现undefined,设置为同步
    selectOptionChange(selectedValue);

})


function selectOptionChange(selectedValue) {
    $.ajax({
        url: "../../../api/LoadDropDownListData", //所需要的列表接口地址			
        type: "get",
        data: { Value: selectedValue},//发送到服务器的数据，key/value形式
        dataType: "json",
        success: function (data) {
                var listFleet = "";
                
                // 根据返回的数据拼接option
                $.each(data[0], function (key, item) {
                    listFleet += "<option value='" + item + "'>" + item + "</option>";
                });

                $("#selectFleet").append(listFleet); //填充selectFleet
                //不能删下面俩行不然在ie下有问题
                $('#selectFleet').selectpicker('refresh');
                $('#selectFleet').selectpicker('render');
            
        },
        error: function () {
            console.log("数据传送失败！");
        }
    });
}