在firefox jquery工作正常,但不是在chrome?

时间:2016-06-07 03:57:45

标签: jquery

我有问题请帮助我。

根据用户在类别字段中的选择选项创建两个字段类别和子类别,在子类别中更改选项,为此编写代码。

这段代码在firefox中工作得很好,但是在Chrome中它不起作用,我不确定它为什么会发生。



$("#world").click(function(){
  $("#sub_article").html('<option value="">Select</option><option value="">Us</option><option value="">Chaina</option><option value="">Uk</option><option value="">Pakistan</option><option value="">Others</option>');
  $('#type_novel').html('');
});
$("#buss").click(function(){
  $("#sub_article").html('<option value="">Select</option><option value="">Indian business</option><option value="">International business</option><option value="">Markets</option><option value="">Shares</option><option value="">Others</option>');
  $('#type_novel').html('');
});
$("#tech").click(function(){
  $("#sub_article").html('<option value="">Select</option><option value="">Social</option><option value="">IT services</option><option value="">Mobiles & gadgets</option><option value="">Jobs</option><option value="">Others</option>');
  $('#type_novel').html('');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
  <span>Category :</span><select name="cat_article" id="cat_article">
  <option value="">Select</option>
  <option id="world" value="Job Inquiry">World news</option>
  <option id="buss" value="Job Inquiry">Business</option>
  <option id="tech" value="Job Inquiry">Technology</option>
  </select>
</label>
<label>
  <span>Sub category :</span><select name="sub_article" id="sub_article">
  <option value="">Select</option>
  </select>
</label>  
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:3)

<option>标记实际上不应该支持onclick事件(jQuery中的.click)这就是为什么你看到它在某些浏览器中工作但不在其他浏览器中工作。

相反,为value标记中的<option>属性设置一些有意义的值,然后在.change标记中添加<select>处理程序。

例如:

$('#cat_article').change(function(){
        switch($(this).val()){
            case 'world':
                $("#sub_article").html('<option value="">Select</option><option value="">Us</option><option value="">Chaina</option><option value="">Uk</option><option value="">Pakistan</option><option value="">Others</option>');
                $('#type_novel').html('');
                break;
            case 'buss':
                 $("#sub_article").html('<option value="">Select</option><option value="">Indian business</option><option value="">International business</option><option value="">Markets</option><option value="">Shares</option><option value="">Others</option>');
                $('#type_novel').html('');
                break;
            case 'tech':
                $("#sub_article").html('<option value="">Select</option><option value="">Social</option><option value="">IT services</option><option value="">Mobiles & gadgets</option><option value="">Jobs</option><option value="">Others</option>');
                $('#type_novel').html('');
                break;
        }
    });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
  <span>Category :</span><select name="cat_article" id="cat_article">
  <option value="">Select</option>
  <option value="world">World news</option>
  <option value="buss">Business</option>
  <option value="tech">Technology</option>
  </select>
</label>
<label>
  <span>Sub category :</span><select name="sub_article" id="sub_article">
  <option value="">Select</option>
  </select>
</label>

答案 1 :(得分:0)