如果選擇第一個Dropdwon中的選項，則創建第二個下拉菜單

Question

對於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; 
} 

感謝這麼多的幫助。

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到None的Display屬性，使其不可見默認。

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