如果第一个下拉框中的某个选项处于选定状态，则创建第二个下拉框

Create a Second Dropdown if an Option in a First Dropdwon is Selected

本文关键字：状态 于选定 创建 第二个 第一个 如果 选项      更新时间：2023-09-26

我对HTML/CSS/Javascript完全陌生，因为这里有人问过类似的问题，所以我提前道歉，但解决方案远比我需要的复杂（而且都涉及jquery）。由于我需要的是（希望）相当基本的，我希望有一个更简单、初学者友好的解决方案。

我的目标是：如果用户在下拉菜单（"Dropdown1"）中选择特定选项（选项"Country Reports"），则第二个单独的（即不是子菜单）下拉菜单（即"Dropdown2"）会出现在预定位置（即绝对位置）。

我当前的HTML代码是：

<div id="location1">
     <select name="dropdown1">
          <option value="0">     </option>
          <option value="1">Country Reports</option>
          <option value="2">Current Production Costs</option>
          <option value="3">Most Recent Newsflash</option>
      </select> 
</div>
<div id="location2">
     <select name="dropdown2">
          <option value="0">     </option>
          <option value="1A">Country Report Portugal</option>
          <option value="1B">Country Report Spain</option>
          <option value="1C">Country Report Turkey</option>
      </select> 
 </div>

相应的CSS代码为：

#location1
{
position: absolute;
top: 20px;
left: 400px;
width: 250px;
height: 70px;
}
#location2
{
position: absolute;
top: 150px;
left: 400px;
width: 250px;
height: 70px;
}

非常感谢你的帮助。

制作一个简单的JS函数：

 function func(){
    if (document.getElementById("dropdown1").value == "1") {    
        document.getElementById("location2").style.display = 'block';
    }
    else{
        document.getElementById("location2").style.display = 'none';
    }
 }

您需要在onchange()事件上调用上述函数。

<div id="location1">
 <select id="dropdown1" onchange="func()">
      <option value="0">     </option>
      <option value="1">Country Reports</option>
      <option value="2">Current Production Costs</option>
      <option value="3">Most Recent Newsflash</option>
  </select> 
</div>
<div id="location2">
 <select name="dropdown2">
      <option value="0">     </option>
      <option value="1A">Country Report Portugal</option>
      <option value="1B">Country Report Spain</option>
      <option value="1C">Country Report Turkey</option>
  </select> 
 </div>

只需将位置2的Display属性设置为None即可使其在默认情况下不可见。

#location1
{
position: absolute;
top: 20px;
left: 400px;
width: 250px;
height: 70px;
}
#location2
{
position: absolute;
top: 150px;
left: 400px;
width: 250px;
height: 70px;
display:none;
}
相关文章：