采用layui的美化时保留select里面的change事件
在前端开发过程中，select元素是经常用到的一个表单元素，但是默认的select样式比较丑陋，为了美化界面，很多人会使用第三方库来美化select，其中layui是比较常用的框架之一。然而，在使用layui美化select的时候，原生的change事件会失效，本文将介绍在保留layui美化效果的同时如何绑定change事件。
一、layui美化select的方法
要使用layui美化select，需要先引入layui框架，在页面中加入以下代码：
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
然后，在页面中使用select元素，并添加lay-filter属性和class属性，其中lay-filter属性用于绑定事件，class属性用于设置样式。例如：
<select name="city" lay-filter="selectDemo" class="layui-select">
<option value="0">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
这样，就可以实现基本的美化效果。具体样式可以参考layui的官方文档。
二、layui美化select时change事件的失效
在使用layui美化select后，原生的change事件会失效，换句话说，无法监听到select元素的值变化。
例如，以下代码：
<select name="city" lay-filter="selectDemo" class="layui-select">
<option value="0">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script>
$('select[name="city"]').change(function(){
var selected = $(this).val();
console.log(selected);
});
</script>
当选择了不同的选项时，控制台没有输出任何内容，说明change事件没有被触发。
三、保留layui美化select的同时绑定change事件
要在layui美化select的基础上绑定change事件，需要使用layui的form模块提供的on方法。该方法可以监听到layui美化select的值变化，并触发回调函数。
例如，以下代码：
<select name="city" lay-filter="selectDemo" class="layui-select">
<option value="0">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script>
layui.use(['form'], function(){
var form = layui.form;
form.on('select(selectDemo)', function(data){
var selected = data.value;
console.log(selected);
});
});
</script>
这里先使用layui模块化技术引入form模块，然后调用form.on方法，传入两个参数：第一个参数是lay-filter的值，也就是要绑定事件的select元素，第二个参数是回调函数，当select的值发生变化时会触发这个回调函数。
这样就可以在保留layui美化select的同时，绑定成功change事件了。
四、实现change事件的效果
在绑定change事件后，需要根据select元素的值做出相应的操作。以下是一个简单的例子：
<select name="city" lay-filter="selectDemo" class="layui-select">
<option value="0">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script>
layui.use(['form'], function(){
var form = layui.form;
form.on('select(selectDemo)', function(data){
var selected = data.value;
if(selected == 'bj'){
$('body').css('background-color', 'red');
} else if(selected == 'sh'){
$('body').css('background-color', 'green');
} else if(selected == 'gz'){
$('body').css('background-color', 'blue');
} else {
$('body').css('background-color', '#fff');
}
});
});
</script>
这里当选择北京、上海、广州时分别将body元素的背景色改为红色、绿色、蓝色，其他选项背景色为白色。
五、总结
通过本文的介绍，我们了解到如何使用layui美化select，并保留change事件的功能，这对于前端开发来说是非常有用的。同时，通过绑定change事件的例子，我们也可以看出如何根据select元素的值做出相应的操作，这在开发中也是非常常见的需求。