奇怪的LayUI下拉框
今天要做一个二级联动的下拉框，看了LayUI的文档，感觉应该很容易。
与联动下拉框相关的html文件主要内容：
JavaScript内容：
var arrOutUnitList = [];
var arrOutUnitMemberList = [];
layui.use(['dropdown', 'util', 'layer', 'table','form'], function(){
var dropdown = layui.dropdown
,layer = layui.layer
,$ = layui.jquery
,form=layui.form;
$.ajax({
url:'getOutUnitList.php',
type:'POST',
success:function (data) {
for (var i in data) {
arrOutUnitList.push(data[i]);
}
}
});
//下拉列表的赋值
dropdown.render({
elem: '.demo1'
,data: [
{title: '日常维护',id: 101},
{title: '定期巡检',id: 102},
{title: '数据处理',id: 103},
{title: '帐号权限',id: 104},
{title: '视频会议',id: 105},
{title: '网络运维',id: 106},
{title: '耗材购置',id: 107},
{title: '其他工作',id: 108},
]
,click: function(obj){
document.getElementById('workType').innerHTML=obj.title;
},
})
dropdown.render({
elem: '.demo2',
data: arrOutUnitList,
click: function(obj){
document.getElementById('outUnit').innerHTML=obj.title;
arrOutUnitMemberList = [];
$.ajax({
url:'getOutUnitMemberList.php',
data:"C01="+obj.title,
type:'POST',
async:false,
success:function (data) {
for (var i in data) {
arrOutUnitMemberList.push(data[i]);
}
}
});
}
})
dropdown.render({
elem: '.demo3'
,data: []
,click: function(obj){
document.getElementById('outUnitMember').innerHTML=obj.title;
//layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
}
})
});本以为就搞定了，可是点击联系单位后，实施人员下拉框就是不显示，太奇怪了！
让组件重新渲染也不行。
那就初始化不赋值了，改变赋值位置，就是将实施人员的赋值在联系单位下拉框的点击事件里：
dropdown.render({
elem: '.demo2',
data: arrOutUnitList,
click: function(obj){
document.getElementById('outUnit').innerHTML=obj.title;
arrOutUnitMemberList = [];
$.ajax({
url:'getOutUnitMemberList.php',
data:"C01="+obj.title,
type:'POST',
async:false,
success:function (data) {
for (var i in data) {
arrOutUnitMemberList.push(data[i]);
}
}
});
//将实施人员下拉框的赋值放到这里，并且删除它的初始化赋值
dropdown.render({
elem: '.demo3',
data: arrOutUnitMemberList,
click: function(obj){
document.getElementById('outUnitMember').innerHTML=obj.title;
}
});
}
})可以显示了，问题又来了！只能显示一次的点击。就是第一此点击联系单位，选择一个单位后，对应的实施人员可以显示出来了，可是再次换单位，实施人员的下拉框不变化了！
怎么会这么奇怪？看官网文档，也没有这方面的说明，这么优秀的一个框架怎么会出现这样的问题？
折腾了4个小时，投降了，换成select好操作一些。
HTML部分更改为：
Javascript部分更改为：
$.ajax({
url:'getOutUnitList.php',
type:'POST',
success:function (data) {
for (var i in data) {
arrOutUnitList.push(data[i]);
$('#outUnitList').append(new Option(data[i], data[i]));
}
form.render('select');
}
});
//下拉列表的赋值
dropdown.render({
elem: '.demo1'
,data: [
{title: '日常维护',id: 101},
{title: '定期巡检',id: 102},
{title: '数据处理',id: 103},
{title: '帐号权限',id: 104},
{title: '视频会议',id: 105},
{title: '网络运维',id: 106},
{title: '耗材购置',id: 107},
{title: '其他工作',id: 108},
]
,click: function(obj){
document.getElementById('workType').innerHTML=obj.title;
},
});
form.on('select(outUnitList)', function(data){
var selectUnitName = data.value; //选择的单位名称
// console.log(selectUnitName);
$.ajax({
url: 'getOutUnitMemberList.php',
data:"C01="+selectUnitName,
dataType: 'json',
type: 'post',
success: function (returnData) {
$('#outUnitMember').empty();
// for (var i in returnData) {
// $('#outUnitMember').append(new Option(returnData[i], returnData[i]));
// }
$.each(returnData, function (index, value) {
$('#outUnitMember').append( new Option(value, value) );
});
form.render('select');
}
});
});
php获取实施人员：
query($sql);
$returnReslut = array();
while ($row = $res->fetch_array()){
array_push( $returnReslut,$row['C03']);
}
header('Content-type:text/json');
echo json_encode($returnReslut);
$res->free();
$mysqli->close();
?>解决两个下拉框联动的问题了。
今天遇到的这个问题真感到奇怪。