html select onchange 失效

问题描述

想要监听 select 切换选项后执行一些操作，比如全换选项后清空其他输入框…

但是无论我使用 onchange 还是 onclick 方法都没用，奇怪呀！

百度了很多方法，都没效果，最后想起来这是个 layui 项目，于是百度了一下 layui select 失效，发现还真是这原因。。。

解决方案

首先检查一下你前端用的是不是 layui，如果是的话就特别简单了，不是的话你需要继续百度。。。

看下面这个例子：

<div class="layui-input-inline">
	<select id="authType" name="authType" lay-filter="authType" lay-verify="required">
		<option value="1" selected>角色</option>
		<option value="2">用户</option>
	</select>
</div>

// layui的select无法用onchange方法监听,需要用以下方式来监听
layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer,
        $ = layui.jquery,
        form = layui.form;
    form.on('select(authType)', function(data){
    	if (data.value == 1) { // 如果选择了角色
    		// 	code
    	} else if (data.value == 2) { // 如果选择了用户
    		// code
    	}
    	// 无论选择哪个,只要切换了选项就会清空其他输入框....
        $("#authNum").val("");
        
        form.render('select'); // 渲染select,固定写法
    });
});