onclick 选择选项标签奇怪地触发事件而不点击选项答案

【问题标题】：onclick Select's option tag strangly trigger even without click on optiononclick 选择选项标签奇怪地触发事件而不点击选项
【发布时间】：2014-03-11 04:14:21
【问题描述】：

我有这样的代码：

    <select id='chapter'>
        <option onclick="return my_function('1')" value='1'>1</option>
        <option onclick="return my_function('2')" value='2'>2</option>
        <option onclick="return my_function('3')" value='3'>1</option>
    </select>

当用户点击选择它触发选项onclick 事件之一。我真的不知道该怎么办。这是我工作中的代码并查看问题（检查选择标签）：

http://animup.net/manga/claymore/c127/#1

【问题讨论】：

我认为您不能将oncllick 事件放在选项标签中。
这很有意义，因为您有 3 个选项，当用户单击选择时，将单击 3 个选项之一。有更好的方法来处理这个问题，我相信 jquery 的答案很快就会涌现
最好在 select 上的 click 或 change 事件中返回所选选项的索引
@RUJordan 我猜只要它有效

标签： javascript jquery html dom dom-events

【解决方案1】：

就像 mayabelle 所说，使用onchange 事件。但是，我不喜欢内联 JS。这是不好的做法和丑陋的。使用 MVC 方法并分离您的代码，使用 addEventListener 附加事件和函数（可以预定义，可以是匿名的）

<select id='chapter'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>1</option>
</select>

var x = document.getElementById("chapter");
x.addEventListener("change",function() {
    var value = my_function(this.options[this.selectedIndex].value);
),false);

【讨论】：

@Curiosity 将 HTML 标记（视图）与 JS 功能（控制器）分开
这就是 MVC 的定义。 “MVC（模型-视图-控制器）是一种架构设计模式，它鼓励通过关注点分离来改进应用程序组织。”

【解决方案2】：

我认为你想要的是 onChange 事件。

试试这个：

<select id='chapter' onChange="SelectOption(this)">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>1</option>
</select>

function SelectOption(sel) {
    var selectedValue = sel.value;
    // Do something with selectedValue here, e.g. call function1 if value 1 is selected
}

【讨论】：