今天在用Layui的时候，由于需要做三级联动菜单，需要用到 Layui select onchange事件，结果当我用“Ajax实现三级联动下拉菜单省市区（PHP+JavaScript）原生代码”的时候，却发现：
在Layui中：
原生的ajax JavaScript代码，select onchange事件触发不了。
原生的ajax JavaScript代码，select onchange事件不起作用了。
原生的ajax JavaScript代码，select onchange事件失效了。
Layui ：作为这么优秀的前端框架，原生的JavaScript代码居然不能执行，这肯定是不行的，结果查了大量的资料，发现，用Layui只能换一种思路去执行原生的JavaScript ajax代码了，具体如下：
1、 加 lay-filter 属性
在html代码中，一定不要忘记 lay-filter属性；
Layui html代码：
<div class="layui-form-item">
<label class="layui-form-label">行内选择框</label>
<div class="layui-input-inline">
<select lay-filter="Loadprovince" name="province" id="province">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select lay-filter="Loadcity" name="city" id="city">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3" name="county" id="county">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
2、Layui表单监听
在Layui中要实现onchange的效果，必须用Layui自带的表单监听事件功能。
Layui javascirpt代码：
layui.use(['form'], function() {
form=layui.form;
form.on('select(Loadprovince)', function(data){
var val=data.value;
console.info(val);
//注意，注意，注意，这里可以写你自己的原生的PHP\JavaScript\Ajax代码
form.render('select');
});
});
总结：
最后给大家看下我的：
layui select onchange事件 多个绑定 代码示例：
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form;
form.on('select(Loadprovince)', function(data){
//var val=data.value;
//console.info(val);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if(document.getElementById("city").getAttribute("disabled")){
document.getElementById("city").removeAttribute("disabled");
}else{
//document.getElementById("city").setAttribute("hidden","hidden");
document.getElementById("county").innerHTML = '<option value="county">县</option>';
document.getElementById("county").setAttribute("disabled","disabled");
}
document.getElementById("city").innerHTML = this.responseText;
}
};
//获取省地区的ID并ajax传送到服务端,例如：四川省id=5
var data = "province=" + document.getElementById("province").value + "&type=<?php echo $type;?>";
console.log(data);
xhttp.open("POST", "<?php echo $HOMEURL.$ADMIN_ADDRESS;?>?action=unique-ajax", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(data);
form.render('select');
});
form.on('select(Loadcity)', function(data){
var val=data.value;
console.info(val);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if(document.getElementById("county").getAttribute("disabled")){
document.getElementById("county").removeAttribute("disabled");
}
document.getElementById("county").innerHTML = this.responseText;
}
};
var data = "city=" + document.getElementById("city").value + "&type=<?php echo $type;?>";
console.log(data);
xhttp.open("POST", "<?php echo $HOMEURL.$ADMIN_ADDRESS;?>?action=unique-ajax", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(data);
form.render('select');
});
});
</script>
注意：
由于每个人用的框架不同，代码编程语言不同，如果你也遇到了：Layui表单“动态加载select数据时，会导致点击select没有反应或者点击两次才出现下拉列表“类似的情况，可以参考：
Layui表单“动态加载select数据，点击两次才出来”的原因与解决方法
例如：博主我最近就遇到了这样的情况，现在我已经改正并解决了这个问题。
