选择选项仅适用于 Chrome答案

【问题标题】：Select Option not Work only Chrome选择选项仅适用于 Chrome
【发布时间】：2013-05-31 21:42:39
【问题描述】：

当我单击带有类选项的选择选项时，我需要调用一个函数。在 Firefox、Internet Explorer 和 Opera 上一切正常，但在 Google Chrome 上却不行。

代码如下：

<fieldset class="suburbSelect">
    <label for="suburbSelect">Provincia</label>
    <select class="suburbSelect">
        <option class="alessandria" value="Piemonte, Alessandria">Alessandria</option>
        <option class="asti" value="Piemonte, Asti">Asti</option>
        <option class="biella" value="Piemonte, Biella">Biella</option>
        <option class="cuneo" value="Piemonte, Cuneo">Cuneo</option>
        <option class="novara" value="Piemonte, Novara">Novara</option>
        <option class="torino" value="Piemonte, Torino">Torino</option>
        <option class="verbania" value="Piemonte, Verbano Cusio Ossola ">Verbano Cusio Ossola</option>
        <option class="vercelli" value="Piemonte, Vercelli">Vercelli</option>
    </select>
</fieldset>

jQuery(".alessandria").click(function(){  
    alert(hello!);
});
jQuery(".asti").click(function(){  
    alert($(".asti").attr("class"));
});

http://jsfiddle.net/all2aller/KqPCs/2/

我使用的是 Jquery 1.9.1。

【问题讨论】：

为什么需要这样
小代码修复：换行“你好！”带引号，否则会引发错误。

标签： jquery google-chrome

【解决方案1】：

这是工作代码和演示：

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $(".suburbSelectElmnt").change(function () {        
        var activeClass = $(".suburbSelectElmnt option:selected").attr('class');
        switch (activeClass) {
           case 'alessandria':
           alert("hello!");
           break;
           case 'asti':
           alert(activeClass);
           break;
       }
   });
});
</script>
<fieldset class="suburbSelect">
    <label for="suburbSelect">Provincia</label>
    <select class="suburbSelectElmnt">
        <option class="alessandria" value="Piemonte, Alessandria">Alessandria</option>
        <option class="asti" value="Piemonte, Asti">Asti</option>
        <option class="biella" value="Piemonte, Biella">Biella</option>
        <option class="cuneo" value="Piemonte, Cuneo">Cuneo</option>
        <option class="novara" value="Piemonte, Novara">Novara</option>
        <option class="torino" value="Piemonte, Torino">Torino</option>
        <option class="verbania" value="Piemonte, Verbano Cusio Ossola ">Verbano Cusio Ossola</option>
        <option class="vercelli" value="Piemonte, Vercelli">Vercelli</option>
    </select>
</fieldset>

Jsfiddle Code

【讨论】：

非常感谢您，非常有趣。但我找到了另一种方法来做我需要的事情，它似乎适用于所有浏览器。 jsfiddle.net/KqPCs/30

【解决方案2】：

首先，你这里有一个错字：

    alert(hello!);

应该是：

    alert("hello!");

其次，在这种情况下，您对类的使用很奇怪......您为每个选定的选项都有一个类，这是检查选择框值的一种非标准方式。

相反，您可以使用 jQuery 的 change() 和 val() 函数，如下所示：

$(".suburbSelect").change(function() {
    var val = $(this).val();

    if (val == "Piemonte, Alessandria") {
        alert("hello!");
    } else if (val == "Piemonte, Asti") {
        alert($(".asti").attr("class"));
    }
});

我已在此处相应地更新了您的 jsFiddle：

http://jsfiddle.net/KqPCs/5/

【讨论】：

【解决方案3】：

您是否尝试过将其关闭再打开？ :)

我遇到了完全相同的问题，当我重新启动 chrome 时它得到了解决。

【讨论】：