javascript 使用javascript根据选择显示/隐藏（切换）div的显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19491858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide (toggle) the display of divs based on selection using javascript
提问by mpsbhat
I have a web page with a dropdown menu and two divs as given below:
我有一个带有下拉菜单和两个 div 的网页，如下所示：
<html>
<head>
<title>Show/Hide a div section based on selection</title>
</head>
<body>
<select id='sel'>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="firstdiv">
<label><input type="checkbox" id='1' />A</label>
<label><input type="checkbox" id='2' />B</label>
<label><input type="checkbox" id='3' />C</label>
</div>
<div id="seconddiv">
<label><input type="checkbox" id='4' />D</label>
<label><input type="checkbox" id='5' />E</label>
<label><input type="checkbox" id='6' />F</label>
</div>
</body>
</html>
How can I toggle the display of the above two divs based on selection using javascript or jQuery? I.e. when I select option 1, the firstdiv should display and later one should hide and vice versa.
如何使用javascript或jQuery根据选择切换上述两个div的显示？即当我选择选项 1 时，第一个 div 应该显示，然后一个应该隐藏，反之亦然。
回答by
HTML
HTML
<select id="selectMe">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<br><br><br>
<div id="div1" class="group" >
<label><input type="checkbox" id='1' />A</label>
<label><input type="checkbox" id='2' />B</label>
<label><input type="checkbox" id='3' />C</label>
</div>
<div id="div2" class="group" >
<label><input type="checkbox" id='4' />D</label>
<label><input type="checkbox" id='5' />E</label>
<label><input type="checkbox" id='6' />F</label>
</div>
JS:
JS：
$(document).ready(function () {
$('.group').hide();
$('#div1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
回答by S. S. Rawat
回答by shemy
you can try like this:
你可以这样尝试：
<script>
function test1(){
var elem = document.getElementById("test").value;
document.getElementById("firstdiv").style.display = (elem == "1") ? "block" : "none";
document.getElementById("seconddiv").style.display = (elem == "2") ? "block" : "none";
}
</script>
<select id="test" onchange="test1();">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="firstdiv" style="display:none">
<label><input type="checkbox" id='1' />A</label>
<label><input type="checkbox" id='2' />B</label>
<label><input type="checkbox" id='3' />C</label>
</div>
<div id="seconddiv" style="display:none">
<label><input type="checkbox" id='4' />D</label>
<label><input type="checkbox" id='5' />E</label>
<label><input type="checkbox" id='6' />F</label>
</div>
回答by skobaljic
For your case, you can use:
对于您的情况，您可以使用：
<!doctype html>
<html>
<head>
<title>Hide elements on select change</title>
</head>
<body>
<select id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="firstdiv">
<label><input type="checkbox" id='1' />A</label>
<label><input type="checkbox" id='2' />B</label>
<label><input type="checkbox" id='3' />C</label>
</div>
<div id="seconddiv">
<label><input type="checkbox" id='4' />D</label>
<label><input type="checkbox" id='5' />E</label>
<label><input type="checkbox" id='6' />F</label>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#sel').on('change', function() {
var baseVal = $(this).val();
switch (baseVal) {
case '1' :
$('#seconddiv').hide();
$('#firstdiv').show();
break;
case '2' :
$('#firstdiv').hide();
$('#seconddiv').show();
break;
default:
break;
};
});
$('#sel').trigger('change');
</script>
</body>
</html>
.. but there are much better ways to output html so you can access elements easily via script.
.. 但是有更好的方法来输出 html，因此您可以通过脚本轻松访问元素。
