CODEWITHSUNDEEP
javascriptjqueryhtml
Akash Agarwal
Akash Agarwal

Reputation: 199

How to trigger a event when a dropdown is opened?

I want to trigger a event to refresh all the options of dropdown, when we are opening it. And make sure that event won't get fired when we close the dropdown or select any option in it.

I am using following html code for dropdown.

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

Could anyone suggest the right way of doing it? I am using jquery.

Upvotes: 2

Views: 5421

Answers (5)

Meghana Agrawal
Meghana Agrawal

Reputation: 36

Try using both change and keydown simultaneously.

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

Upvotes: 1

sfy
sfy

Reputation: 3278

With vanilla JS, I prefer 'focusin' instead of 'focus' event, because the former bubbles.

With jQuery, you will use 'focus', jQuery fixes it for us. 

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>

Upvotes: 0

void
void

Reputation: 36703

Use .on("focus", callback) to do this. It will only get triggered when you dropdown will get active and not when you will close it or select any option.

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

Upvotes: 1

Kishor Velayutham
Kishor Velayutham

Reputation: 818

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

The change event handler must be declared before the trigger. 

$('#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>

Upvotes: 0

Naman Kheterpal
Naman Kheterpal

Reputation: 1840

Just use a function call on focus of select box. click event will be fired even well closing it.

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

Upvotes: 0

Related Questions