隐藏第二个Jquery选择
隐藏第二个Jquery选择
提问于 2015-01-19 08:45:12
如果第一个选择还没有完成，我如何隐藏第二个选择。这是我的密码
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
});
</script>
</head>
<body>
<select name="select1" id="select1">
<option value="3"></option>
<option value="1">IT</option>
<option value="2">Management</option>
</select>
<select name="select2" id="select2">
<option value="3"></option>
<option value="1">Programmer</option>
<option value="1">Technician</option>
<option value="2">HR</option>
<option value="2">Secretary</option>
</select>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-19 08:54:20
-试试这个：- http://jsfiddle.net/adiioo7/jrst4qg8/
JS:-
$(document).ready(function(){
$("#select1").change(function() {
if(this.value != 3){
$("#select2").show();
}
else
{
$("#select2").hide();
}
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
});CSS:-
#select2 { display:none }Stack Overflow用户
发布于 2015-01-19 08:47:16
默认情况下用css隐藏第二个选择，并在您从#select1中选择某些内容时显示它。
CSS：
#select2 { display:none }jQuery：
$(document).on('change', '#select1', function() {
$('#select2').show();
// ....
});Stack Overflow用户
发布于 2015-01-19 09:08:40
您必须使用CSS进行初始显示，即默认情况下应该隐藏第二个下拉列表。
CSS代码：
#select2 {
display: none;
}尽管您可以使用jquery隐藏第二个下拉列表，但不建议使用它，因为最初加载的HTML页面将与css属性一起加载，然后是js文件。
jQuery代码：
$("#select2").hide();然后，您需要根据第一个下拉列表中选择的选项使用jQuery显示/隐藏第二个下拉列表。
jQuery代码：
$(this).val() != 3 ? $("#select2").show() : $("#select2").hide(); 吉斯德尔演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28020740
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号