Question

当我点击带有类选择的选择选项时，我需要调用一个函数。在Firefox，Internet Explorer和Opera上一切正常，但在谷歌浏览器上却没有。

以下是代码：

<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。

Answer 1

首先，你有一个拼写错误：

    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/

Answer 2

这是工作代码和演示：

<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

Answer 3

您是否尝试过将其关闭再打开？：）

我遇到了完全相同的问题，当我重新启动Chrome时它已得到修复。

选择选项不仅仅适用于Chrome

3 个答案: