Question

以下是我的代码在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>

Answer 1

option不会在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>

使用jQuery，它将是

$('select').on('change', function() {
    var selected = this.value;
});

Answer 2

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

<br>

我也不想这样做

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

当然，你可以和js一起做很多花哨的css来克服这种情况，但这意味着更多的代码和更多的事件以及更多可能出错的事件......

作为用户，如果我想要的选项是第一个，为什么我首先必须点击下一个，这样我才能选择第一个！我的第一个直觉是点击第一个！但是这不会选择该选项而且它不会触发事件：（

这就是为什么我们希望将click事件与我们也将使用的更改事件相关联的一个很好的理由。（像腰带和吊带......）

现在我也阅读了很多答案/帖子“你不能，使用改变”，但实际上这并不完全正确，你可以点击事件来激发选择选项，但是我得到它的唯一方法工作是如果你定义一个大小＆gt; 1这使得它更像是一个列表而不是下拉列表，也许这就是它工作的原因......

但是，如果您尝试以下列方式进行操作，则无法正常工作！

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

Answer 3

另一种方法是向事件监听器而不是选项添加事件监听器。

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

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

Answer 4

$(document).ready(function(){
    $("#qtype").change(function(){
        $(this).find('option:selected')
        // do something....
    }
})

Answer 5

我发现了一个有趣的发现，这对这个问题产生了重大影响。注意：这发生在Chrome版本63.0.3239.108（官方版本）（64位）上，在Windows 7上运行。我在此处报告可能在其他平台上运行的Chrome上有所不同，但值得研究无论如何，如果相同的解决方案适用于其他平台。

我写了一些代码，创建弹出对话框，允许我选择各种选项。该代码允许对话按顺序一个接一个地出现，并以相反的顺序解除。然后将此代码耦合到两个对话框，两个对话框都包含选择控件。

然后我写了一个函数，用选项元素填充那些选择控件，将click事件监听器附加到选项。正确调用该函数将数据附加到附加到相关选择控件的选项。

然后启动了对话＃1。操作了select控件，click事件适用于我选择的选项，所有这些都可以通过Crome调试器轻松观察[1]，以及[2]事件监听器代码对对话中其他DOM元素的影响

然后启动对话＃2，并覆盖对话＃1。

然后操纵了选择控件，并且...... 没有触发任何点击事件。

有什么区别？

不同之处在于对话＃1上的选择控件设置了尺寸属性（特别是尺寸=＆＃34; 5＆＃34;）。对话＃2的选择控件不是否设置了尺寸属性。

当我在Dialogue＃2上的select控件上设置size属性时，单击事件再次被正确触发。

如果您希望点击事件与Chrome上的选择控件中的选项一起使用，则必须在选择控件上设置尺寸属性，即：

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

如果从选择控件中省略此属性，则会忽略单击事件。

现在还有待确定，如果必须在运行JavaScript代码之前直接在HTML文件中设置size属性，或者在附加选项之前在JavaScript中设置size属性也是有效的。让我在测试时再回到这一点。

编辑：我刚刚进行了测试，看看是否在JavaScript中的select控件中添加了size属性，而不是在HTML文件中，这可以作为在Chrome中正确处理选项元素上的点击事件的方法（版本细节与以前相同），这也有效。所以，代码如：

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

也可以。

显然，Chrome中的尺寸属性有一些特殊注意事项需要考虑 - 某些值会被记录，至少在某些版本中会出现，因为会出现意想不到的副作用。

现在仍然可以看看它是否也适用于Firefox。

编辑2：也适用于Firefox。（57.0.2 64位）

onclick事件不适用于选项

5 个答案: