如果在具有相同值的两个选项之间进行更改,如何检测选择更改事件？

Question

<select>
   <option value="">Select</option>
   <option value="10000">Minimum Coverage</option>
   <option value="25000">Average Coverage</option>
   <option value="">Other</option>
</select>

我必须让"选择"和"其他"都具有空值,因为字段上的验证规则不允许除空字符串或数值之外的任何内容.

最重要的是,我需要能够检测到用户何时处于"选择"并单击"其他".可能吗？

编辑:onChange似乎没有开火.

Answer 1

您可以查看selectedIndex酒店.如果您希望每次项目更改时发生某些事情,请使用onchange事件绑定.

document.getElementsByTagName('select')[0].onchange = function() {
  var index = this.selectedIndex;
  var inputText = this.children[index].innerHTML.trim();
  console.log(inputText);
}

小提琴

Answer 2

较短的版本是：

 var mySelect = document.getElementById('#mySelect');
 mySelect.onchange = (event) => {
     var inputText = event.target.value;
     console.log(inputText);
 }

Answer 3

change即使更改的选项具有相同的值，也肯定会触发该事件：

jsfiddle.net/kyw2E

在change事件处理程序中，您可以检查this.selectedIndex属性以确定哪个<option>被选中。然后，您可以检查text所选选项的属性，如果有帮助的话：

coverageSelector.onchange = function (e) {
    var selectedOption = this[this.selectedIndex];
    var selectedText = selectedOption.text;
}