javascript - 使用 js 将 onclick 事件传递给选择选项

Question

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

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'] + '\')');
            }
        }
    }

如您所见，我正在为每个选择“选项”添加一个 onclick 侦听器，这在页面本身的源代码中看起来很棒，但是如果我将其复制到编辑中，我注意到我的问题是“updateTxtContent()”函数是不叫。

<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>

显然应该有更好的方法来做到这一点，我不知道。

Answer 1

也许在您的选择标签中尝试一个 onchange 事件。

<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;" onchange='updateTxtContext(this.value);'>

Answer 2

我认为您希望将事件处理程序放在您的选择上而不是选项上。看这个小提琴我的意思

<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>
​

或者因为看起来你没有使用 jQuery：

function updateTxtContent(){
    var e = document.getElementById("syn_list");
    var f = e.options[e.selectedIndex].value;    
    alert(f);
}

Answer 3

在大多数浏览器中，选项元素不能有点击事件。

新选项是设置值和文本，不知道为什么你认为你可以用它设置其他属性。

您想在选择元素上使用更改事件。

Answer 4

截至 2016 年，选择支持单击事件，并将该选项作为目标单击：

使用 jQuery

click_handler = function(e) {
    alert('clicked on: ' + e.target.value);
}

$('#syn_list').click(click_handler);

至少在 Firefox 44 中有效