问题
I have a web page with a dropdown menu and two divs as given below:
<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.
回答1:
demo
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:
$(document).ready(function () {
$('.group').hide();
$('#div1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
回答2:
try this. this will help you
$('#sel').change(function(){
if($(this).val()==1){
$('#firstdiv').show();
$('#seconddiv').hide();
}
else{
$('#seconddiv').show();
$('#firstdiv').hide();
}
});
Demo Here
回答3:
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>
回答4:
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.
来源:https://stackoverflow.com/questions/19491858/show-hide-toggle-the-display-of-divs-based-on-selection-using-javascript