CODEWITHSUNDEEP
javascripthtml
Cheitan
Cheitan

Reputation: 141

What event to use with HTML's select tag

My question is about what event is better to use with the select tag in the case where I want to detect which option of the select is selected in JavaScript.

Until now I've found two way to do it. The first one is to use the "change" eventListener, just like this :

selectList.addEventListener("change", function(){
    console.log(selectList.options[selectList.selectedIndex].value);
});

But there is two problem with this method. Firstly, this event is not fired at the beginning, so it don't log the very first element, selected by default in the list. Secondly, when clicking on an item of the list, the event is fired two times, which means there is two identical lines in the console.

The second method I've tried is with the "click" event, just like that :

selectList.addEventListener("click", function(){
    console.log(selectList.options[selectList.selectedIndex].value);
});

The problem here is obviously that the event is fired each time I click on the list, so the log is done at least two times if I want to change the selected item. Furthermore, the default selected item when the list "spawn" is not logged either, which is normal.

So how can I do to log the selected item only once, and make the default selected item logged too ?

Upvotes: 1

Views: 548

Answers (3)

zer00ne
zer00ne

Reputation: 43860

Change event fires when the event.target (in this example, the select element), has lost focus (or blur). So whatever the user does after triggering a change event, will cause the event to actually fire, so you should get only one event per action as it should be. Take a look at this Snippet, the log plainly shows that you needn't be concerned about double event firing.

  1. The first click 'wakes up the listener but it's lazy and has one eye open.

  2. As long as the select has focus, then the listener is just waiting for unfocus. In order to be unfocus, you must focus on something else by clicking , etc.

  3. Now that you are clicking the option, you have officially unfocased from the select thereby causing the change event to fire.

SNIPPET

selectList.addEventListener("change", function() {
  console.log(selectList.options[selectList.selectedIndex].value);
  event.stopPropagation
});


var ta = document.getElementById('ta');

ta.addEventListener('change', function(e) {
  alert('HEY! Why are not focusing on me anymore?');
}, false);

ta.addEventListener('click', function(e) {
  alert('Why are you poking me? that\'s annoying, STOP!');
  }, false);
select {
  margin-right: 50px;
}
ol {
  margin-left: 70px;
  margin-right: 50px;
}
#ta {
  margin-right: 50px;
  }
<select id='selectList'>
  <option value="">---</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>


<textarea id="ta"></textarea>
<ol>
<li>Type something in the textarea.</li>
<li>Click anywhere within this window, except the textarea</li>
  <li>Now reset this Snippet.</li>
  <li>Type something again.</li>
  <li>Now click the textarea.</li>
  </ol>
<button id="btn">CLICK</button>

Upvotes: 1

Josh Thomas
Josh Thomas

Reputation: 11

Select list already have an "onchange" event you can use:

selectList.onchange = function()
{
    console.log(selectList.options[selectList.selectedIndex].value);
};

Upvotes: 0

Rayon
Rayon

Reputation: 36609

change event is invoked when option of the select-input is changed.

Create a new change-event using Eventconstructor and invoke dispatchEvent on the target element.

document.getElementById('mySelect').addEventListener("change", function() {
  console.log(this.value);
});

var event = new Event('change');
document.getElementById('mySelect').dispatchEvent(event);
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

Upvotes: 0

Related Questions