onclick事件不适用于选项

问题描述 投票:2回答:5

以下是我的代码在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>
javascript jquery google-chrome
5个回答
7
投票

options不会在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;
});

1
投票

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

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

我也不想这样做

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

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

作为用户,如果我想要的选项是第一个,为什么我首先要点击下一个,这样我才能选择第一个!我的第一个直觉是点击第一个!但是,这不会选择该选项,它不会触发事件:(

这就是为什么我们希望click事件与我们也将使用的change事件相对的一个很好的理由。 (像腰带和吊带......)

现在我也阅读了很多答案/帖子“你不能,使用改变”,但实际上这并不完全正确,你可以点击事件来激发选择选项,但是我让它工作的唯一方法是你定义一个大小> 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!

0
投票

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

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

上面的代码将找到select元素并将其命名为e。然后找到所选的值并将其命名为selectedSelect。然后,您只需将此值传递给question_type()函数即可。


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

0
投票

我发现了一个有趣的发现,它对这个问题产生了重大影响。注意:这发生在Chrome版本63.0.3239.108(官方版本)(64位)上,在Windows 7上运行。我在这里报告的内容可能与其他平台上运行的Chrome有所不同,但无论如何都值得调查,以防相同的解决方案适用于其他平台。

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

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

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

然后启动对话#2,并将其覆盖在对话#1上。

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

有什么区别?

区别在于对话#1上的选择控件设置了大小属性(特别是size =“5”)。对话#2上的选择控件没有设置大小属性。

我在Dialogue#2上的select控件上设置size属性的那一刻,再次正确触发了click事件。

如果您希望点击事件与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位)

© www.soinside.com 2019 - 2024. All rights reserved.