我有问题请帮助我。
根据用户在类别字段中的选择选项创建两个字段类别和子类别,在子类别中更改选项,为此编写代码。
这段代码在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;
答案 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)
您在Chrome中生成了一些错误。按F12并打开Chrome控制台,您将看到3个错误
无法加载资源:net :: ERR_BLOCKED_BY_CLIENT http://static.adzerk.net/Extensions/adFeedback.js
无法加载资源:net :: ERR_BLOCKED_BY_CLIENT http://static.adzerk.net/Extensions/adFeedback.css
这将让您了解正在发生的事情。然后你可以转到这个链接,这可能会对情况有所了解。