Run function when clicking on a select option?

Question

I'm trying to run a function when an option is clicked in a select dropdown menu. I tried the onChange event (inline html)...it's working but only runs the function when I change for another option (I know that's what onChange does). But what I need is that when someone clicks on the option, the function runs right away.

That's my html code:

<select id="Bname" onchange="updateClicked()" name="Bname"></select>

So like I said, the function is working correctly, and the onchange event works, but I need something that would trigger the function as soon as the option is clicked inside the select menu.

Thanks

Do you want to trigger the event, when there is only 1 option in the select? — Aruna Tebel, Aug 13 '15 at 14:15
tibzon : I want to trigger the event when any of the option is selected. When I use onClick, it only runs the function when I re-click in the menu to change option again. It does not work as soon as I click on an option — Danimp, Aug 13 '15 at 14:22
Thanks @Kukuluops, first time I take a look at this topic and it solved my issue. Thanks a lot again! — Danimp, Aug 13 '15 at 14:42
also likely a self-duplicate / x/y / pressure-repost of: [Deleting a specific node based on dropdown selection in XML](http://stackoverflow.com/q/31945165/367456) — hakre, Aug 16 '15 at 14:21

score 3 · Answer 1 · answered Aug 13 '15 at 14:44

I think your doing it right, you wan't to listen to change.

<select id="Bname">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>

Then attach an event listener to it, and maybe check for the selected option to trigger a specific action for that option.

 var sel = document.getElementById('Bname');

 sel.addEventListener("change", myFunction);

 function myFunction() {

   if ( sel.value === 'volvo' ) {
     // Do stuff
   }

   console.log(sel.value);

 }

Run function when clicking on a select option?

1 Answers1