select标签选择相同选项不触发onchange解决方案

最新推荐文章于 2024-05-10 18:23:42 发布

林小白的日常

最新推荐文章于 2024-05-10 18:23:42 发布

阅读量1.7k

点赞数

文章标签： sql javascript 数据库

本文链接：https://blog.csdn.net/weixin_51609337/article/details/132846116

版权

在select标签添加以下属性：

<select onmousedown="this.sindex = this.selectedIndex; this.selectedIndex = -1;" onblur="if(this.sindex) this.selectedIndex = this.sindex;" onchange="alert('ok'); this.sindex = undefined;">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

在谷歌浏览器中可以实现select标签下选择相同选项就能触发onchange事件，但在火狐浏览器中select不回显选项内容。

想到了一个方法，就是在select下新增一个option标签，每次onchange时将select值重置为这个新增的option，这样就是每选一个将选中的值给新增的，就不存在选相同的了。代码如下：

html页面：

<select id="my_select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" hidden>3</option>  //新增的option
</select>

js页面：

$("#my_select").change(function () {
   var v = $("#my_select").val();//获取选中时的val值
	$("#my_select").val("3");//将select值赋值给第三个option
        
	console.log(v)
});

完整代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
    <div style="width: 100%; padding-top:100px;">
            <select id="my_select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" hidden>3</option>
            </select>
    </div>
</body>
<script>
    $("#my_select").change(function () {
        var v = $("#my_select").val();//获取选中时的val值
		$("#my_select").val("3");//将select值赋值给第三个option
        
		console.log(v)
    });
 
</script>
 
</html>

林小白的日常

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select标签选择相同选项不触发onchange解决方案

想到了一个方法，就是在select下新增一个option标签，每次onchange时将select值重置为这个新增的option，这样就是每选一个将选中的值给新增的，就不存在选相同的了。在谷歌浏览器中可以实现select标签下选择相同选项就能触发onchange事件，但在火狐浏览器中select不回显选项内容。
复制链接

扫一扫