title: getting an onclick event to a select option using js
body: <p>i am having a very frustrating problem. I have this code
  which filters out my results and inputs them into a select box</p>
  
  <pre><code>var syn = &lt;?=json_encode($syn)?&gt;;
  function filterByCity() {
          var e = document.getElementById("city_filter");
          var city = e.options[e.selectedIndex].value;
          var selectOptions = document.getElementById('syn_list');
          selectOptions.options.length = 0;
  
          for (i = 0; i &lt; syn.length; i++) {
              if (city == syn[i]['city'] || city == 'all') {
                  selectOptions.options[selectOptions.options.length] = new Option(syn[i]['name'], syn[i]['id'] + '" onclick="updateTxtContent(\'' + syn[i]['id'] + '\')');
              }
          }
      }
  </code></pre>
  
  <p>as you might see i am adding a onclick listener to every select "option" which look great in the source code of the page itself but if i copy it into an edit i notice this
  my problem is that the "updateTxtContent()" function is not called.</p>
  
  <pre><code>&lt;select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;"&gt;
  &lt;option value="13&amp;quot; onclick=&amp;quot;updateTxtContent('13')"&gt;option a&lt;/option&gt;
  &lt;option value="14&amp;quot; onclick=&amp;quot;updateTxtContent('14')"&gt;option b&lt;/option&gt;
  </code></pre>
  
  <p></p>
  
  <p>obviously there should be a better way to do this that i am not aware of.</p>