naresh
naresh

Reputation: 174

In firefox jquery working fine, but not in chrome?

I have a problem please help me.

I'm creating two fields category and subcategory, based on user's select option in category field, options changed in subcategory for this write a code like this.

This code working fine in firefox but where as in chrome it is not working, I'm not sure why it's happening.

$("#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('');
});
<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>  

Upvotes: 2

Views: 82

Answers (2)

dtkaias
dtkaias

Reputation: 781

The <option> tag isn't really supposed to support the onclick event (.click in jQuery) This is why you see it working in some browsers but not others.

Instead, set some meaningful values for the value attribute in your <option> tags, and then add a .change handler to the <select> tag.

For example:

$('#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>

Upvotes: 3

Related Questions