Какие события (ы) выбрать, чтобы делегировать обработчик от <select> к выбранному <option>?

Question

Когда другой <option> выбран в поле управления <select>, это событие можно обработать с помощью обработчика <select> в совершенно правильном направлении. Однако по некоторым причинам для моего проекта было бы очень удобно использовать делегированный обработчик <option>. Я попытался вызвать и делегировать необходимый обработчик с использованием разных событий. Полученные результаты были неудовлетворительными:

• onfocus, onchange и onkeyup обработчики были вызваны только на контроль <select> и не были вызваны на вложенной <option>.
• onclick обработчик работал по мере необходимости и был делегирован (активирован по выбранному <option>). Однако, очевидно, нет смысла использовать этот обработчик, поскольку другой option в элементе управления select также может быть выбран клавиатурой, а не только мышью.

Я прав? Я пропустил какое-либо стандартное событие DOM, которое можно использовать в случае? Или мне нужно использовать только своего рода полипол, например, focusin jQuery и focusout?

Answer 1

Из дискуссии не являются ни одно событие DOM (s), которые соответствуют указанным требованиям.

Answer 2

Я не уверен, что полностью понимаю вашу потребность, но я постараюсь ответить.

Как вы говорите о 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 
    }) 
}); 

живой пример:

$("#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()); 
 
    }) 
 
})

<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>