html5 onselect,javascript - Is there an onSelect event or equivalent for HTML <select>? - Stack Over...

This may not directly answer your question, but this problem could be solved by simple design level adjustments. I understand this may not be 100% applicable to all use-cases, but I strongly urge you to consider re-thinking your user flow of your application and if the following design suggestion can be implemented.

I decided to do something simple than hacking alternatives for onChange() using other events that were not really meant for this purpose (blur, click, etc.)

The way I solved it:

Simply pre-pend a placeholder option tag such as select that has no value to it.

So, instead of just using the following structure, which requires hack-y alternatives:

A

B

C

Consider using this:

Select...

A

B

C

So, this way, your code is a LOT more simplified and the onChange will work as expected, every time the user decides to select something other than the default value. You could even add the disabled attribute to the first option if you don't want them to select it again and force them to select something from the options, thus triggering an onChange() fire.

At the time of this answer, I'm writing a complex Vue application and I found that this design choice has simplified my code a lot. I spent hours on this problem before I settled down with this solution and I didn't have to re-write a lot of my code. However, if I went with the hacky alternatives, I would have needed to account for the edge cases, to prevent double firing of ajax requests, etc. This also doesn't mess up the default browser behaviour as a nice bonus (tested on mobile browsers as well).

Sometimes, you just need to take a step back and think about the big picture for the simplest solution.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 JSP 页面中,可以通过 JS 脚本来实现一个下拉列表框的值改变时,另一个下拉列表框的选项内容发生变化的联动效果。 具体实现方法如下: 1. 首先在页面加载时,给第一个下拉列表框绑定一个 `onchange` 事件,当其值改变时,触发 JS 函数。 2. 在 JS 函数中,获取第一个下拉列表框的选中值,并根据该值生成第二个下拉列表框的选项内容,并将其替换掉原有的选项内容。 3. 最后,将第二个下拉列表框的值重置为默认值。 下面是一个简单的示例代码: ```html <!-- 第一个下拉列表框 --> <select id="select1" onchange="onSelect1Change()"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <!-- 第二个下拉列表框 --> <select id="select2"> <option value="default">请选择</option> </select> <script> function onSelect1Change() { // 获取第一个下拉列表框的选中值 const selectedValue = document.getElementById('select1').value; // 根据选中值生成第二个下拉列表框的选项内容 let optionsHtml = ''; if (selectedValue === 'option1') { optionsHtml = '<option value="option1-1">选项1-1</option><option value="option1-2">选项1-2</option>'; } else if (selectedValue === 'option2') { optionsHtml = '<option value="option2-1">选项2-1</option><option value="option2-2">选项2-2</option>'; } else if (selectedValue === 'option3') { optionsHtml = '<option value="option3-1">选项3-1</option><option value="option3-2">选项3-2</option>'; } // 将第二个下拉列表框的选项内容替换为新的内容 document.getElementById('select2').innerHTML = optionsHtml; // 将第二个下拉列表框的值重置为默认值 document.getElementById('select2').value = 'default'; } </script> ``` 需要注意的是,该示例代码仅为演示联动效果的实现方法,实际应用时需要根据具体需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值