getting an onclick event to a select option using js

[AUChaseX]

i am having a very frustrating problem. I have this codewhich filters out my results and inputs them into a select box\[code\]var syn = <?=json_encode($syn)?>;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 < syn.length; i++) { if (city == syn['city'] || city == 'all') { selectOptions.options[selectOptions.options.length] = new Option(syn['name'], syn['id'] + '" onclick="updateTxtContent(\'' + syn['id'] + '\')'); } } }\[/code\]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 thismy problem is that the "updateTxtContent()" function is not called.\[code\]<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;"><option value="http://stackoverflow.com/questions/12808706/13" onclick="updateTxtContent('13')">option a</option><option value="http://stackoverflow.com/questions/12808706/14" onclick="updateTxtContent('14')">option b</option>\[/code\]obviously there should be a better way to do this that i am not aware of.