使用js将onclick事件添加到选择选项 [英] getting an onclick event to a select option using js

问题描述

我有一个非常令人沮丧的问题。我有这个代码
，它过滤掉我的结果并将它们输入到一个选择框中。

  var syn =< = json_encode（$ SYN）？取代; 
函数filterByCity（）{
 var e = document.getElementById（city_filter）; 
 var city = e.options [e.selectedIndex] .value; 
 var selectOptions = document.getElementById（'syn_list'）; 
 selectOptions.options.length = 0; （城市== syn [i] ['city'] || city =='all'）的
 
（i = 0; i< syn.length; i ++） ）{
 selectOptions.options [selectOptions.options.length] = new Option（syn [i] ['name']，syn [i] ['id'] +'onclick =updateTxtContent（\' '+ syn [i] ['id'] +'\'）'）; 
 
 
 
 $ / code $ / pre 
 
 
你可能会看到我添加一个onclick监听器，每个选择选项，这在页面本身的源代码看起来不错，但如果我把它复制到编辑中，我注意到这个
我的问题是不调用updateTxtContent（）函数。
 < select size =10name =syn_listid =syn_listclass =span12dir = rtlstyle =text-align：right;> 
< option value =13& quot; onclick =& quot; updateTxtContent（'13'）> option a< / option> 
< option value =14& quot; onclick =& quot; updateTxtContent（'14'）> option b< / option> 
  
 
 
 
 
显然应该有更好的方法来做到这一点，我不知道。
解决方案
我想你想你的事件处理程序选择而不是在选项上。我的意思是小提琴  
 
 
 < select size =10name =syn_listid =syn_listclass =span12dir =rtlstyle =text-align：right;平变化= updateTxtContent（）; > 
< option value =13>选项a< / option> 
< option value =14> option b< / option> 
< / select> 
 
< script> 
函数updateTxtContent（）{
 alert（$（＃syn_list）。val（））; 
} 
< / script> 
 
  
或者因为它看起来像你没有使用jQuery：
  function updateTxtContent（）{
 var e = document.getElementById（syn_list）; 
 var f = e.options [e.selectedIndex] .value; 
 alert（f）; 
} 
  
 
i am having a very frustrating problem. I have this code
which filters out my results and inputs them into a select box
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[i]['city'] || city == 'all') {
                selectOptions.options[selectOptions.options.length] = new Option(syn[i]['name'], syn[i]['id'] + '" onclick="updateTxtContent(\'' + syn[i]['id'] + '\')');
            }
        }
    }
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.
<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;">
<option value="13&quot; onclick=&quot;updateTxtContent('13')">option a</option>
<option value="14&quot; onclick=&quot;updateTxtContent('14')">option b</option>


obviously there should be a better way to do this that i am not aware of.
解决方案
I think you want to have your event handler on your select rather than on the option.  See this fiddle for what I mean
<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;" onchange="updateTxtContent();">
<option value="13">option a</option>
<option value="14">option b</option>
</select>

<script>
function updateTxtContent(){
 alert($("#syn_list").val());   
}   
</script>
​
Or since it looks like you aren't using jQuery:
function updateTxtContent(){
    var e = document.getElementById("syn_list");
    var f = e.options[e.selectedIndex].value;    
    alert(f);
}


                        
这篇关于使用js将onclick事件添加到选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！