Reputation: 174
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
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
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
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.
Upvotes: 0