Question

我对HTML / CSS / Javascript全新，并提前道歉，因为这里提出了类似的问题，但解决方案远比我需要的复杂（并且都涉及jquery）。因为我需要（希望）非常基本，我希望有一个更简单，适合初学者的解决方案。

我的目标：如果用户在下拉菜单中选择了一个特定选项（选项＆＃34;国家报告＆＃34;）（＆＃34; Dropdown1＆＃34;，那么第二个，单独的（即不是子菜单）），下拉（＆＃34; Dropdown2＆＃34;）出现在预定位置（即绝对位置）。

我目前的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;
}

非常感谢您的帮助。

Answer 1

制作一个简单的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;
}

如果选择了第一个下拉列表中的选项，则创建第二个下拉列表

1 个答案: