多个下拉框?
Multiple drop down boxes?
我试图在 select 从原始下拉菜单中输入不同的提示时打开多个下拉框。
例如,原来的下拉框会显示“大陆”,然后下拉到一个大陆列表,当你 select 一个大陆时,一个新的框会打开,询问你“国家”,然后你 select 一个国家和一个新的投递箱打开 select 个州。
我一直在使用这个模板
<script type="text/javascript">
function CheckDepartment(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';}
function CheckOption(val){
var element=document.getElementById('misc')
if(val=='misc')
element.style.display='block';
else
element.style.display='block';
}
</script>
</head>
<body>
<select name="color" onchange='CheckDepartment(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
<option value=""></option>
<option value="hi">hi</option>
<option value="misc" id="misc" >misc</option>
</select>
<select name="third" style='display:none;'>
<option value=""></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
但是当select从第二个下拉框中选择一个选项时,我无法打开第三个下拉框。
编辑:第三个框。我想我删除了我的最后一次尝试,所以这是我记忆中的一种重建。我对这一切也非常陌生,不知道我尝试过的任何东西是否有意义。
这是一个简化的演示。
(它假定只有“是”值才会触发下一个相关下拉列表的显示。)
const
select1 = document.getElementById("select1"),
select2 = document.getElementById("select2");
document.addEventListener("change", handleDropdownDisplay);
function handleDropdownDisplay(event) {
let changedElement = event.target;
if ((changedElement != select1) && (changedElement != select2)) {
return;
}
if (changedElement.value == "yes") {
changedElement.parentElement.nextElementSibling.classList.remove("hidden");
} else {
changedElement.parentElement.nextElementSibling.classList.add("hidden");
}
}
div {
margin-bottom: 0.5em;
}
.hidden {
display: none;
}
<div>
<label for="select1">Show level 2?</label>
<select id="select1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select2">Show level 3?</label>
<select id="select2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select3">Would your rather</label>
<select id="select3">
<option value="brains">Eat monkey brains</option>
<option value="vba">Write code in VBA</option>
</select>
</div>
(顺便说一句,当第 2 级隐藏时,第 3 级不会自动隐藏。这可能是您想要添加的功能。)
我试图在 select 从原始下拉菜单中输入不同的提示时打开多个下拉框。
例如,原来的下拉框会显示“大陆”,然后下拉到一个大陆列表,当你 select 一个大陆时,一个新的框会打开,询问你“国家”,然后你 select 一个国家和一个新的投递箱打开 select 个州。
我一直在使用这个模板
<script type="text/javascript">
function CheckDepartment(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';}
function CheckOption(val){
var element=document.getElementById('misc')
if(val=='misc')
element.style.display='block';
else
element.style.display='block';
}
</script>
</head>
<body>
<select name="color" onchange='CheckDepartment(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
<option value=""></option>
<option value="hi">hi</option>
<option value="misc" id="misc" >misc</option>
</select>
<select name="third" style='display:none;'>
<option value=""></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
但是当select从第二个下拉框中选择一个选项时,我无法打开第三个下拉框。
编辑:第三个框。我想我删除了我的最后一次尝试,所以这是我记忆中的一种重建。我对这一切也非常陌生,不知道我尝试过的任何东西是否有意义。
这是一个简化的演示。
(它假定只有“是”值才会触发下一个相关下拉列表的显示。)
const
select1 = document.getElementById("select1"),
select2 = document.getElementById("select2");
document.addEventListener("change", handleDropdownDisplay);
function handleDropdownDisplay(event) {
let changedElement = event.target;
if ((changedElement != select1) && (changedElement != select2)) {
return;
}
if (changedElement.value == "yes") {
changedElement.parentElement.nextElementSibling.classList.remove("hidden");
} else {
changedElement.parentElement.nextElementSibling.classList.add("hidden");
}
}
div {
margin-bottom: 0.5em;
}
.hidden {
display: none;
}
<div>
<label for="select1">Show level 2?</label>
<select id="select1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select2">Show level 3?</label>
<select id="select2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select3">Would your rather</label>
<select id="select3">
<option value="brains">Eat monkey brains</option>
<option value="vba">Write code in VBA</option>
</select>
</div>
(顺便说一句,当第 2 级隐藏时,第 3 级不会自动隐藏。这可能是您想要添加的功能。)