葬空吟 2022-08-19 11:09 采纳率: 69.7%
浏览 43
已结题

bootstrap-select默认值设置

img

两个bootstrap-select,逻辑是:
1.进入页面-自动触发函数1运行Ajax查询第一个select数据
2.选择第一个select的选项后,触发函数2带着参数运行Ajax查询第二个select数据
3.选择第二个select的选项后,触发函数3带着参数运行Ajax查询一个table的数据
需求:想要在进入页面的时候自动触发函数1并选择第一个select的第一个选项,之后再自动触发函数2选择第二个select的第一个选项,再自动触发函数3查询出table的数据
现在可以进行到第二步,但是函数2获取不到应该携带的参数,并且,直接点击第一个select框的第一个选项还无法触发click事件,需要点第二项才行

j's代码如下:

// 最开始的工厂选择,进入页面自动运行此函数
function getfactory() {
    console.log("进入工厂筛选");
    $.ajax({
        type: "POST",
        // cache: false,
        url: "/api/param/factoryselect",
        dataType: "Json",
        async: true,
        success: function (data) {
            console.log(data, '1');
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    $('#factory').append("<option id ='factory" + i + "' value=" + data[i].工厂 + " selected \>" + data[i].工厂 + "</option>");
                } else {
                    $('#factory').append("<option id ='factory" + i + "' value=" + data[i].工厂 + "\>" + data[i].工厂 + "</option>");
                }
            };
            $('#factory').selectpicker('refresh');

            $('#factory').selectpicker('render');
        },
    });


}
// 最开始的车间选择,选择完工厂后自动运行此函数
function getshop(obj) {
    // 清空原有的options
    $('#shop.selectpicker').empty();
    // 重置刷新options
    $('#shop').selectpicker('refresh');
    $('#shop').selectpicker('render');
    // 获取工厂选择的值
        var value = obj.options[obj.selectedIndex].value;
        factory = { 'factory': value }
    console.log(value, "进入车间筛选");
    $.ajax({
        type: "POST",
        url: "/api/param/factoryselect",
        data: factory,
        async: true,
        success: function (data) {
            shop = data
            for (var i = 0; i < shop.length; i++) {
                if (i === 0) {
                    $('#shop').append("<option id ='shop" + i + "' value=" + shop[i].车间 + " selected \>" + shop[i].车间 + "</option>");
                } else {
                $('#shop').append("<option id ='shop" + i + "' value=" + shop[i].车间 + "\>" + shop[i].车间 + "</option>");
                }
            };
            $('#shop').selectpicker('refresh');
            $('#shop').selectpicker('render');
        },
    });
}
function getprocedure(obj) {
    $('#maptable').empty();
    console.log($('#factory').val(), '80');
    console.log(obj, '81');
    var value = [];
    var procedures = [];
    var procedure = [];
    var equipment = [];
    var maxnum = [];
        value = obj.options[obj.selectedIndex].value;
        shop = {
            'factory': $('#factory').val(),
            'shop': value,
        }
    $.ajax({
        type: "POST",
        url: "/api/param/factoryselect",
        data: shop,
        async: false,
        success: function (data) {
            console.log(data, 'shop 69');
            for (var i = 0; i < data.length; i++) {
                procedures.push(data[i].工序);
                equipment.push({ "工序": data[i].工序, "工位": data[i].工位 })
            }
            procedure = Array.from(new Set(procedures))
            console.log(procedure, 'procedure 75');
            console.log(equipment, 'equipment 78');
            for (var i = 0; i < procedure.length; i++) {
                $('#maptable').append("<tr id='procedures" + i + "'> <td style='background-color: #003664; color: #ffffff;' id='procedure" + i + "' value='" + procedure[i] + "'>" + procedure[i] + "</td></tr>");
            };
            for (var i = 0; i < procedure.length; i++) {
                for (var j = 0; j < equipment.length; j++) {
                    if (procedure[i] === equipment[j].工序) {
                        $('#procedures' + i).append("<td id='equipment" + j + "' value='" + equipment[j].工位 + "'>" + equipment[j].工位 + "</td>");
                    }
                };
            };
        },
    });


}

html代码如下:

//  select框
<div class="row">
            <div class="col-xs-2">
                <div class="input-group">
                    <span class="input-group-addon">工厂</span>
                    <!-- onchange="getshop(this)" 选择后触发函数并传参 -->
                    <select id="factory" data-size="6" name="factory" title="请选择工厂"
                        class="form-control selectpicker show-tick" onchange="getshop(this)"></select>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <span class="input-group-addon">区域</span>
                    <select id="shop" data-size="6" name="shop" title="请选择区域"
                        class="form-control selectpicker show-tick" onchange="getprocedure(this)"></select>
                </div>
            </div>
        </div>
//  table 表
                <div class="row">
                    <table id='maptable'>
                    </table>
                </div>

  • 写回答

2条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 已结题 10月21日
      • 修改了问题 8月19日
      • 创建了问题 8月19日

      悬赏问题

      • ¥15 c语言九宫格问题纠错
      • ¥15 数值方法(MATLAB版)第四版课后习题求解
      • ¥15 关于#java#的运行时间过长问题,如何解决?
      • ¥15 R包安装过程中出现了错误
      • ¥15 android 类似辅助筛选软件得实现
      • ¥40 pyqt5主界面跳转实现pandas运用
      • ¥20 uniapp使用uni.uploadFile上传图片,通过后端返回的授权链接,put文件到阿里云服务器
      • ¥15 一个简单循迹小车应该怎么做
      • ¥15 VS2022搭建ASM运行环境
      • ¥15 找个会matlab的,写一下代码的过程