i have problem please me.
i'm creating 2 fields category , subcategory, based on user's select option in category field, options changed in subcategory write code this.
this code working fine in firefox in chrome 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>
the <option> tag isn't supposed support onclick event (.click in jquery) why see working in browsers not others.
instead, set meaningful values value attribute in <option> tags, , add .change handler <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> 