gpt4 book ai didi

javascript - 为什么 div 不显示/隐藏 jQuery 中的选择选项

转载 作者:行者123 更新时间:2023-11-28 16:27:02 25 4
gpt4 key购买 nike

当我从选择下拉列表中选择一个选项时,我需要隐藏特定的 div。
例如
加载文档时不会显示任何 div
当我们选择 1 个选项时,OneLevel 将显示
当我们选择 2 选项时,TwoLevel 将显示
当我们选择 1 个选项时,ThreeLevel 将显示

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#Level").hide();
function WorkflowLevel(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;

$("#Level").hide();

switch (selected) {
case '0':
$("#Level").hide();
break;
case '1':
$("#Level").hide();
$("#Level#OneLevel").show();
break;
case '2':
$("#Level").hide();
$("#Level#TwoLevel").show();
break;
case '3':
$("#Level").hide();
$("#Level#ThreeLevel").show();
break;
}

}
</script>
</head>
<body>

<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<div id="Level OneLevel">1</div>
<div id="Level TwoLevel">2</div>
<div id="Level ThreeLevel">3</div>

</body>
</html>

最佳答案

您不需要switch 大小写。您可以使用索引位置并相应地切换可见性。

$(".Level").hide();

function WorkflowLevel(obj) {
var selected = $("option:selected", obj).index();
$(".Level").hide();
selected && $(".Level:eq(" + (selected - 1) + ")").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<div class="Level OneLevel">1</div>
<div class="Level TwoLevel">2</div>
<div class="Level ThreeLevel">3</div>

关于javascript - 为什么 div 不显示/隐藏 jQuery 中的选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42851129/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com