Quiero activar un evento para actualizar todas las opciones del menú desplegable, cuando lo estamos abriendo. Y asegúrese de que ese evento no se active cuando cerremos el menú desplegable o seleccionemos cualquier opción en él.

Estoy usando el siguiente código html para el menú desplegable.

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

¿Alguien podría sugerir la forma correcta de hacerlo? Estoy usando jquery.

1
Akash Agarwal 3 mar. 2018 a las 12:07

5 respuestas

La mejor respuesta

Use .on("focus", callback) para hacer esto. Solo se activará cuando el menú desplegable se active y no cuando lo cierre o seleccione cualquier opción.

$("#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>
1
void 3 mar. 2018 a las 09:49

Con vanilla JS, prefiero el evento 'focusin' en lugar del 'focus', porque las burbujas anteriores.

Con jQuery, usará 'focus', jQuery lo arregla por nosotros.

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>
0
Jacob 3 mar. 2018 a las 11:10
Try using val() to change to the value and  trigger() to manually fire the event.

El controlador de eventos de cambio debe declararse antes del desencadenante.

$('#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>
0
Kishor Velayutham 3 mar. 2018 a las 09:39

Simplemente use una llamada de función en focus del cuadro de selección. El evento click se disparará incluso bien cerrándolo.

<select onFocus="myFunction()">
    <option value="">Select</option>
    <option value="A">B</option>
    <option value=C">D</option>
 </select>
0
Naman Kheterpal 3 mar. 2018 a las 09:12

Intente usar tanto el cambio como el keydown simultáneamente.

 $('#SelectedNic').on('change keydown', function () {
     RegisterPanelChangeHandler();
 });
2
Meghana Agrawal 7 sep. 2018 a las 13:18