打开下拉菜单时如何触发事件？

Question

当我们打开它时，我想触发一个事件以刷新下拉菜单的所有选项。 并确保当我们关闭下拉菜单或在其中选择任何选项时，不会触发该事件。

我正在使用以下html代码进行下拉。

<select id="SelectedNic" class="dropdown" name="SelectedNic" type="text">
    <option value="">Select</option>
    <option value="A">B</option>
    <option value=C">D</option>
 </select>

有人可以建议正确的做法吗？ 我正在使用jquery。

Answer 1

使用.on("focus", callback)来执行此操作。 仅在下拉菜单处于活动状态时才会触发它，而不是在关闭它或选择任何选项时才触发它。

 $("#SelectedNic").on("focus", function(){ console.log("Opened"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="SelectedNic" class="dropdown" name="SelectedNic" type="text"> <option value="">Select</option> <option value="A">B</option> <option value=C">D</option> </select> 

Answer 2

尝试同时使用change和keydown。

 $('#SelectedNic').on('change keydown', function () {
     RegisterPanelChangeHandler();
 });

Answer 3

只需在选择框的focus上使用函数调用即可。 click事件将被触发，即使关闭也是如此。

<select onFocus="myFunction()">
    <option value="">Select</option>
    <option value="A">B</option>
    <option value=C">D</option>
 </select>

Answer 4

Try using val() to change to the value and  trigger() to manually fire the event.

更改事件处理程序必须在触发器之前声明。

 $('#SelectedNic').change(function(){ var data= $(this).val(); alert(data); }); $('#SelectedNic') .val('A') .trigger('change'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="SelectedNic" class="dropdown" name="SelectedNic" type="text"> <option value="">Select</option> <option value="A">B</option> <option value="C">D</option> </select> 

Answer 5

使用香草JS时，我更喜欢'focusin'事件而不是'focus'事件，因为前者会冒泡。

使用jQuery，您将使用“焦点”，jQuery会为我们修复它。

 let sltEl = document.getElementById('select-el') sltEl.addEventListener('focusin', evt => { console.log('opened') }) 

 <select id="select-el" class="dropdown" name="selectEl"> <option disabled selected>Select an option</option> <option value="A">B</option> <option value="C">D</option> </select>