html select onchange 失效

亦凉 2023-01-16 04:56 175阅读 0赞

### 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,固定写法
        });
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 获取当前select onchange事件

jquery 获取当前select onchange事件后台代码前端代码 add.html 关注地方附加返回h

淡淡的烟草味﹌/ 2023年02月18日 08:08/ 0 赞/ 92 阅读

相关 html select onchange 失效

html select onchange 失效问题描述解决方案问题描述想要监听 select 切换选项后执行一些操作，比如全换选项后清空其他输

亦凉/ 2023年01月16日 04:56/ 0 赞/ 176 阅读

相关 html select onchange控制div显示或隐藏的代码

<html> <head> <title>测试</title> </head> <body> <form act

浅浅的花香味﹌/ 2022年12月26日 04:53/ 0 赞/ 138 阅读

相关 Layui 下拉框Select onchange事件监听

<html> .... <div class="layui-input-block">

Myth丶恋晨/ 2022年12月19日 06:16/ 0 赞/ 229 阅读

相关 select控件onchange事件的兼容性问题

html控件select的onchange事件可以处理当用鼠标改变select的值时要做的事情但是我在做的时候发现在firefox下，用键盘上下来改变select值时不触发

た入场券/ 2022年09月20日 06:06/ 0 赞/ 186 阅读

相关 select onchange 事件的触发

做小组内使用的一个简单工具，其中要实现的一个小功能是当某个下拉菜单的选择值改变时触发另一表单元素的属性变化。自然的想到使用select表单元素的onchange事件。

怼烎@/ 2022年08月12日 14:29/ 0 赞/ 274 阅读

相关 select onChange事件

select onChange事件，实现效果为,选择下拉框中的一个把他显示出来. <!DOCTYPE html> <html> <head>

快来打我*/ 2022年06月15日 07:41/ 0 赞/ 245 阅读

相关 html select操作

参考文档：http://www.jb51.net/w3school/htmldom/prop\_select\_selectedindex.htm 原文地

小鱼儿/ 2022年06月13日 02:53/ 0 赞/ 173 阅读

相关 js点击select触发onchange函数

点击select 中的不同option,生效日期框填入不同的日期: <table width="800" border="0"> <tr>

野性酷女/ 2022年05月09日 01:06/ 0 赞/ 381 阅读

相关 onchange 事件

定义和用法 onchange 事件会在域的内容改变时发生。语法 οnchange="SomeJavaScriptCode" <table> <tb

ゞ浴缸里的玫瑰/ 2021年11月29日 04:08/ 0 赞/ 362 阅读