CODEWITHSUNDEEP
jquery
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

Dale
Dale

Reputation: 1628

You have some errors that are being produced in Chrome. Hit F12 and open up the Chrome console and you'll see 3 errors

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://static.adzerk.net/Extensions/adFeedback.js

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://static.adzerk.net/Extensions/adFeedback.css

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://engine.adzerk.net/i.gif?e=eyJhdiI6NDE0LCJhdCI6NSwiYnQiOjAsImNtIjo5MjEsImNoIjoxMTc4LCJjayI6e30sImNyIjoyNjg4LCJkaSI6IjYxYTM2ZWM5ZDBiZDQ4NjdiMmZkZWQ3MmI1OTA3Mzg1IiwiZG0iOjEsImZjIjoyNDg1LCJmbCI6MjY2MywiaXAiOiIyNC4xNC44NC43NSIsImt3IjoianF1ZXJ5LHgtdXNlci1yZWdpc3RlcmVkLHgtMjAwcGx1cy1yZXAiLCJudyI6MjIsInBjIjowLCJlYyI6MCwicHIiOjYxNzM3LCJydCI6MSwicmYiOiJodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vIiwic3QiOjgyNzcsInVrIjoidWUxLTgzNTVhMzk1ZDJkYjRiZjE4MzlkYTcwMzk3ODU1ZDcyIiwiem4iOjQ1LCJ0cyI6MTQ2NTI3NjU1Nzk2MCwiYmYiOnRydWUsInBuIjoiYWR6ZXJrMTExMzQ3MTU0NiIsImZxIjowfQ&s=myHyTjnpAWqzwqAn7qRey9LzIe4

This will give you a start to what is going on. You might then go to this link which may shed some light on the situation.

Failed to load resource under Chrome

Upvotes: 0

Related Questions