Question

当另一个＆lt;选项＆gt;在＆lt; select＆gt;中选择控制，可以使用＆lt; select＆gt; -triggered处理程序以非常直接的方式处理此事件。但是由于某些原因，我的项目使用委托的＆lt; option＆gt; -triggered处理程序会更方便。我尝试使用不同的事件触发和委托所需的处理程序。结果不理想： onfocus，onchange和onkeyup处理程序仅在＆lt; select＆gt;上触发。控制并没有在嵌套的＆lt;选项＆gt;上触发。 onclick处理程序根据需要工作并被委派（在选定的＆lt;选项＆gt;上触发）。但是，使用此处理程序显然没有意义，因为选择控件中的另一个选项也可以通过键盘选择，而不是仅通过鼠标选择。我对吗？我是否错过了可以在案例中使用的任何标准DOM事件？或者我只能使用一种polyfill，比如jQuery的焦点和焦点？

Answer 1

我不确定我是否理解你的需要，但我会尽力回答。

当你在谈论jQuery时，我有这个解决方案：

$("#my-select").change(function() {
    // $(this) refers to the select element
    $(this).find("option:selected").each(function() {
        // this function is called only once per change
        // $(this) refers to the selected option
    })
});

现场例子：

＆＃13;

$("#my-select").change(function() {
  // $(this) refers to the select element
  $("#s_value").text($(this).val());
  $("#s_text").text($(this).find("option:selected").text());
  $(this).find("option:selected").each(function() {
    // this function is called only once per change
    // $(this) refers to the selected option
    $("#o_value").text($(this).val());
    $("#o_text").text($(this).text());
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="my-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<br>SELECTED (FROM SELECT) :
<br>Value : <span id="s_value"></span>
<br>Text : <span id="s_text"></span>
<br>
<br>SELECTED (FROM OPTION) :
<br>Value : <span id="o_value"></span>
<br>Text : <span id="o_text"></span>
<br>
<br>

＆＃13;

Answer 2

从讨论中可以看出，没有符合指定要求的DOM事件。

选择将处理程序从<select>委派给选定的<option>的事件是什么？

2 个答案: