Javascript 使用 js 将 onclick 事件发送到选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12808706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting an onclick event to a select option using js
提问by Vad.Gut
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.
正如您可能看到的，我正在为每个选择“选项”添加一个 onclick 侦听器，这在页面本身的源代码中看起来很棒，但是如果我将其复制到编辑中，我会注意到我的问题是“updateTxtContent()”函数是不叫。
<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;">
<option value="13" onclick="updateTxtContent('13')">option a</option>
<option value="14" onclick="updateTxtContent('14')">option b</option>
obviously there should be a better way to do this that i am not aware of.
显然应该有更好的方法来做到这一点，我不知道。
回答by MikeB
maybe try an onchange event in your select tag.
也许在您的选择标签中尝试一个 onchange 事件。
<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;" onchange='updateTxtContext(this.value);'>
回答by davehale23
I think you want to have your event handler on your select rather than on the option. See this fiddlefor 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:
或者因为看起来您没有使用 jQuery：
function updateTxtContent(){
var e = document.getElementById("syn_list");
var f = e.options[e.selectedIndex].value;
alert(f);
}
回答by a1an
As of 2016 it looks like click events are supported for selects and have the option clicked upon as target:
截至 2016 年，选择似乎支持点击事件，并将该选项作为目标点击：
using jQuery
使用 jQuery
click_handler = function(e) {
alert('clicked on: ' + e.target.value);
}
$('#syn_list').click(click_handler);
Works at least in Firefox 44
至少适用于 Firefox 44
回答by epascarello
option elements can not have click events in most browsers.
option 元素在大多数浏览器中不能有点击事件。
And new option is setting the value and the text, not sure why you think you can set other attributes with it.
新选项是设置值和文本，不知道为什么您认为可以用它设置其他属性。
You want to use a change event on the select element.
您想在 select 元素上使用更改事件。
