Question

我有以下HTML代码

<select>
  <option class="language" langv="en" value="en">English</option>
  <option class="language" langv="fr" value="fr">French</option>
</select>

和jquery代码，

$(".language").click(function(){
  var lang = $(this).attr("langv");

  switch(lang){
      case "en":
         window.location.href = "index.php";
      break;
      case "fr":
         window.location.href = "fr/";
      break;
      default:
         // code
      break;
   }

});

上述功能在Firefox和IE中完美运行，但在Chrome中无效。

你能帮帮我吗？我使用的是jquery-1.10.2。

Answer 1

您是否尝试过.change()功能？

$( "select" ).change(function() {
  alert( "Handler for .change() called." );
});

jQuery reference

Answer 2

您正在寻找的change事件不是click

所以，我的建议如下。

将您的HTML更改为：

<select class="language">
   <option langv="en" value="en">English</option>
   <option langv="fr" value="fr">French</option>
</select>

并将您的jQuery更改为：

$(".language").change(function(){
    var lang = $(this).val();
    switch(lang){
       case "en":
         window.location.href = "index.php";
       break;
       case "fr":
         window.location.href = "fr/";
       break;
       default:
         // code
       break;
    }
});

<强> DEMO

如果您使用自定义属性，我建议使用HTML 5 data-*属性。您可以查看John Resig关于他们的文章over here

Answer 3

我认为你应该使用onchange事件进行整个选择，而不是onclick用于其选项。

Answer 4

您必须为下拉列表绑定onChange事件：

$("select").bind('change',function() {
  ...
});

Answer 5

尝试在select本身绑定更改事件。您需要在代码中更改的唯一内容是var lang。

$("select").change(function(){
    var lang = $(this).find(':selected').attr("langv");

  switch(lang){
      case "en":
         window.location.href = "index.php";
      break;
      case "fr":
         window.location.href = "fr/";
      break;
      default:
         // code
      break;
   }

});

或者，由于该值与属性相同，因此您可以使用：

var lang = $(this).val();

事件不适用于jQuery和Chrome选择选项

5 个答案: