我试图隐藏/显示在下拉菜单中进行选择的字段。
参考代码
jQuery的代码似乎没有被接受。有什么建议吗？jQuery新手。我将文件保存为.php
jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
$(document).ready(function() {
$.viewMap = {
'0' : $([]),
'view1' : $('#view1'),
'view2' : $('#view2a, #view2b'),
'view3' : $('#view3')
};
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
// show current
$.viewMap[$(this).val()].show();
});
});
</script>
</head>
html:
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<div id="view1">
<!-- content -->
</div>
<div id="view2a">
<!-- content -->
</div>
<div id="view2b">
<!-- content -->
</div>
<div id="view3">
<!-- content -->
</div>
您有一个重复的<select>。如果将其移除，则视图选择器工作：
JSFiddle
如果有任何jQuery问题是由于您发布的代码之外的代码而在幕后发生的，请在Chrome中按F12打开DevTools，并在刷新页面后单击Console选项卡查看任何JavaScript错误。
Id应该是唯一的。在您的代码中，有两个选择具有相同的id viewSelector。您可以删除一个集合。
给每个div一个公共类，比如；
<div class="views" id="view3">
然后尝试使用这个类隐藏所有div。然后在下拉选择中显示所需的div。整个代码可能看起来像；
$.viewMap = {
'0': $([]),
'view1': $('#view1'),
'view2': $('#view2a, #view2b'),
'view3': $('#view3')
};
$('#viewSelector').change(function() {
// hide all
$(".views").hide();
// show current
$.viewMap[$(this).val()].show();
});
这里是一个演示。希望这能有所帮助。
请尝试以下代码：
jQuery:
$(document).ready(function() {
$('#viewSelector').change(function() {
$('.view').hide();
// show current
if($(this).val() !== 0){
if($(this).val() == "view2"){
$("#view2a, #view2b").show();
}else{
$("#"+ $(this).val()).show();
}
}
});
});
HTML:
<select id="viewSelector">
<option value="0">-- Select a View --</option>
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>
<div id="view1" class="view">
<!-- content -->
</div>
<div id="view2a" class="view">
<!-- content -->
</div>
<div id="view2b" class="view">
<!-- content -->
</div>
<div id="view3" class="view">
<!-- content -->
</div>