我想用 jQuery 更改 2 个不同的 div 样式。当值为 div1
时,将显示 div1。当值为div2
时,将显示div2。我想我不能用 jQuery 中的“if/else”来做到这一点。
<style>
#div1 { display: block; background-color: red; height:300px; width:300px;}
$div2 { display: none; background-color: blue; height:300px; width:300px;}
</style>
<select id="divit">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<script>
function displayVals() {
var divoneValues = $("#divit").val("div1");
var divtwoValues = $("#divit").val("div2");
$("#div1").css("display", "none");
$("#div2").css("display", "block");
}
$("select").change(displayVals);
displayVals();
</script>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
最佳答案
这应该可以解决问题:
<style>
#div1 { display: block; background-color: red; height:300px; width:300px;}
#div2 { display: none; background-color: blue; height:300px; width:300px;}
</style>
<select id="divit">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<script>
$("#divit").on('change', function() {
var sel = $("select").val();
if (sel=='div1') {
$("#div1").css("display", "block");
$("#div2").css("display", "none");
}else if (sel=='div2') {
$("#div1").css("display", "none");
$("#div2").css("display", "block");
}
});
</script>
<div id="div1"></div>
<div id="div2"></div>
关于javascript - 根据所选选项更改显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8957284/