两个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>
