Javascript onclick事件不适用于选项

下面是我的代码，它在firefox中运行良好，但在chrome中不起作用。 请让我知道如何解决这个问题。主要思想是根据选择框的选定值调用js函数：

<select onselect="question_type(this.value);" name="qtype" id="qtype" class="form-control input-lg" required>
    <option value="">-- Select question type for this quiz --</option>
    <option onclick="question_type(this.value);" value="mcq">1) MCQs</option>
    <option onclick="question_type(this.value);" value="tf">2) True/False</option>
</select>

--选择此测验的问题类型--
1） MCQ
2） 对/错

选项

不在chrome中触发鼠标事件

对于

select

元素，您将在select本身上使用

onchange

事件，select的值将始终与所选选项相同

<select onchange="question_type(this.value);" name="qtype" id="qtype" class="form-control input-lg" required>
    <option value="">-- Select question type for this quiz --</option>
    <option value="mcq">1) MCQs</option>
    <option value="tf">2) True/False</option>
</select>

---

另一种方法是将事件侦听器添加到，而不是选项

var e = document.getElementById("qtype");
var selectedSelect= e.options[e.selectedIndex].value;

---

上面的代码将找到select元素并将其称为e。然后找到所选值并将其称为selectedSelect。然后你可以简单地将这个值传递给question_type（）函数。

现在我看到很多人问为什么不更改事件，因为我不想这样做

<select id="custList" class="_List" size="15" runat="server">
            <option disabled="disabled">choose your stuff</option>
            <options......
</select>

选择你的东西
1这使得它更像是一个列表而不是一个下拉列表，也许这就是它工作的原因

然而，如果你试图用以下方法来做它，它将不起作用

$("#select option").on('click',function(){}); //won't work!
$(".option-class").on('click',function(){}); //won't work!
<option ... onclick="myFunc()" value="blah">blah</option> //won't work!

$（“#选择选项”）。在（'click'，function（）{}）上//不行！
$（“.option类”）。在（'click'，function（）{}）上//不行！
胡说八道，行不通！
我有一个有趣的发现，对这个问题产生了重大影响。注意：这发生在运行Windows 7的Chrome版本63.0.3239.108（官方版本）（64位）上。我在这里报告的内容在其他平台上运行的Chrome上可能有所不同，但无论如何值得研究，以防相同的解决方案在其他平台上运行

我编写了一些代码来创建弹出对话框，允许我选择各种选项。该代码允许对话按顺序一个接一个出现，并按相反顺序取消。然后，该代码被耦合到两个对话框中，两个对话框都包含select控件

然后我编写了一个函数，用option元素填充那些select控件，这些元素将click事件监听器附加到选项中。该函数被适当调用以将数据附加到附加到相关选择控件的选项

对话1随后启动。select控件被操纵，我选择的选项上适时触发了click事件，所有这些都很容易观察到，这得益于[1]通过Crome调试器进行跟踪，以及[2]事件侦听器代码对对话框中其他DOM元素的影响

对话2随后启动，并覆盖在对话1上

然后操纵选择控件，然后未触发任何单击事件

有什么区别

不同之处在于对话框#1上的选择控件设置了一个size属性（特别是size=“5”）。对话框#2上的选择控件未设置大小属性

当我在对话框#2上的选择控件上设置大小属性时，单击事件再次正确触发

如果希望单击事件处理Chrome上选择控件中的选项，则必须在选择控件上设置大小属性，即：

<select id="MySelector" size="6"></select>

也会起作用

显然，Chrome中的size属性需要考虑一些特殊的注意事项——某些值被记录在案，至少在某些版本中，显示出意外的副作用

现在还要看看这在Firefox中是否也有效

编辑2：也适用于Firefox。（57.0.2 64位）
@adeneo它在firefox中工作。为什么不改用
onchange
@anton adeneo告诉我们，选项在chrome中不会触发鼠标事件。即使这在chrome中也不起作用：
onselect=“question\u type（this.value）；”
@user3027531-一个select元素，它的选项没有
onselect
事件？这很好，很乐意帮忙！更新：我后来发现，在谷歌Chrome for Android中，选项上的点击事件根本不起作用。对于该平台，至少目前必须使用onchange事件。
<select id="custList" class="_List" size="15" runat="server">
            <option selected="selected">choose your stuff</option>
            <options......
 </select>

$("#select option").on('click',function(){}); //won't work!
$(".option-class").on('click',function(){}); //won't work!
<option ... onclick="myFunc()" value="blah">blah</option> //won't work!

<select id="MySelector" size="6"></select>

sel = document.getElementById("PickSecondaryClue");
sel.setAttribute("size","5");