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而不是选项上使用事件处理程序。请参阅this fiddle了解我的意思

<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

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

新选项是设置值和文本，不确定为什么您认为可以使用它设置其他属性。

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

Answer 4

截至2016年，看起来支持选择点击事件并点击选项作为目标：

使用jQuery

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

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

至少在Firefox 44中起作用

使用js将onclick事件添加到选择选项

4 个答案: