addEventListener change and option selection

Question

I m trying to have dynamic select list populate itself  from a single selection to start    lt select id  activitySelector  gt         lt option value  addNew  gt Add New Item lt  option gt   lt  select gt    and then JavaScript code we have    addEventListener  select   addActivityItem  false      The problem is that various events don t fire when you have one item  not  change  because  the text is no different when you select that item  not  select   as I have here   for a roughly similar reason  because I m not really selecting anything because there s only one item  What is the event that should be fired here  It seems silly to list a blank item in my option list to fire the event  so I hope there is another solution  Or is that the best solution

User · Answer

The problem is that you used the select option  this is where you went wrong  Select signifies that a textbox or textArea has a focus  What you need to do is use change   Fires when a new choice is made in a select element   also used like blur when moving away from a textbox or textArea   function start          document getElementById  activitySelector   addEventListener  change   addActivityItem  false            function addActivityItem            option is selected       alert  yeah       window addEventListener  load   start  false

User · Answer

You need a click listener which calls addActivityItem if less than 2 options exist   var activities   document getElementById  activitySelector     activities addEventListener  click   function         var options   activities querySelectorAll  option        var count   options length      if typeof count       undefined     count  lt  2                addActivityItem               activities addEventListener  change   function         if activities value     addNew                 addActivityItem               function addActivityItem                Code to add item here     A live demo is here on JSfiddle

[javascript] addEventListener, "change" and option selection

Examples related to javascript

Examples related to dom-events