如何啓用特定的文本框時，選擇特定的組合框選項

Question

對不起，但我是新的HTML，我想問如何啓用特定的文本框時，選擇特定的組合框選項。

我見過的話題how to activate a textbox if I select an other option in drop down box但我不understoond我在做什麼錯。

我想在選擇組合框選項（如option1）時啓用帶有名稱lesson1，lesson2，lesson3的文本框時，如選擇了選項2等組合框選項以啓用名稱爲lesson4，lesson5，lesson6等的文本框供用戶填寫。

這裏是我的代碼

function Select(val) { 
    var element=document.getElementById("options1"); 
    var element2=document.getElementById("options2"); 
    var element3=document.getElementById("options3"); 
    if (val=="option 1"){ 
     element.style.display="block"; 
    else 
     element.style.display="none"; } 
else if (val=="option2"){ 
     element2.style.display="block"; 
    else 
     element2.style.display="none"; } 
else if (val=="option 3"){ 
     element3.style.display="block"; 
    else 
     element3.style.display="none"; } 
    } 

<label class="formLabel"> 
    Options*</label><br /> 
<select name="select2" required="" onchange="Select(this.value);"> 
    <option disabled="disabled" selected="selected" value=""></option> 
    <option value="">option 1</option> 
    <option value="">option 2</option> 
    <option value="">option 3</option> 
</select><br /> 
<div id="options1" style="display: none;"> 
    <label class="classLabel"> 
     lesson 1* 
    </label> 
    <label class="classLabel"> 
     lesson 2*</label> 
    <label class="classLabel"> 
     lesson 3*</label><br /> 
    <input class="formText" name="field7" required="" type="text" /> 
    <input class="formText" name="field8" required="" type="text" /> 
    <input class="formText" name="field9" required="" type="text" /><br /> 
</div> 
<div id="options2" style="display: none;"> 
    <label class="classLabel"> 
     lesson 4* 
    </label> 
    <label class="classLabel"> 
     lesson 5*</label> 
    <label class="classLabel"> 
     lesson 6*</label><br /> 
    <input class="formText" name="field10" required="" type="text" /> 
    <input class="formText" name="field11" required="" type="text" /> 
    <input class="formText" name="field12" required="" type="text" /><br /> 
</div> 
<div id="options3" style="display: none;"> 
    <label class="classLabel"> 
     lesson 7* 
    </label> 
    <label class="classLabel"> 
     lesson 8*</label> 
    <label class="classLabel"> 
     lesson 9*</label><br /> 
    <input class="formText" name="field13" required="" type="text" /> 
    <input class="formText" name="field14" required="" type="text" /> 
    <input class="formText" name="field15" required="" type="text" /><br /> 
</div> 
<input id="submitButton" type="submit" value="send" /></form> </div> 

Answer 1

<script> 
 
    function Select(val) { 
 
     var element=document.getElementById("options1"); 
 
     var element2=document.getElementById("options2"); 
 
     var element3=document.getElementById("options3"); 
 
     if (val=="option 1") 
 
      element.style.display="block"; 
 
     else 
 
      element.style.display="none"; 
 
    if (val=="option 2") 
 
      element2.style.display="block"; 
 
     else 
 
      element2.style.display="none"; 
 
    if (val=="option 3") 
 
      element3.style.display="block"; 
 
     else 
 
      element3.style.display="none"; 
 

 
     } 
 
    </script> 
 

 

 

 
     
 
    <label class="formLabel">Options*</label><br /> 
 

 

 
    <select name="select2" required="" onchange="Select(this.value);"> 
 
    <option disabled="disabled" selected="selected" value=""></option> 
 

 

 
     
 
    <option value="option 1">option 1</option> 
 

 
    <option value="option 2">option 2</option> 
 

 
    <option value="option 3">option 3</option></select><br /> 
 

 
    <div id="options1" style="display:none;"> 
 

 
    <label class="classLabel">lesson 1* </label> 
 
    <label class="classLabel">lesson 2*</label> 
 
    <label class="classLabel" >lesson 3*</label><br /> 
 
    <input class="formText" name="field7" required="" type="text" /> 
 
    <input class="formText" name="field8 required="" type="text" /> 
 
    <input class="formText" name="field9" required="" type="text" /><br /> 
 
    </div> 
 
     
 

 

 
    <div id="options2" style="display:none;"> 
 

 
    <label class="classLabel" >lesson 4* </label> 
 
    <label class="classLabel">lesson 5*</label> 
 
    <label class="classLabel" >lesson 6*</label><br /> 
 
    <input class="formText" name="field10" required="" type="text" /> 
 
    <input class="formText" name="field11" required="" type="text" /> 
 
    <input class="formText" name="field12" required="" type="text" /><br /> 
 
    </div> 
 
     
 

 

 
    <div id="options3" style="display:none;"> 
 

 
    <label class="classLabel">lesson 7* </label> 
 
    <label class="classLabel">lesson 8*</label> 
 
    <label class="classLabel">lesson 9*</label><br /> 
 
    <input class="formText" name="field13" required="" type="text" /> 
 
    <input class="formText" name="field14" required="" type="text" /> 
 
    <input class="formText" name="field15" required="" type="text" /><br /> 
 
    </div> 
 
     
 

 

 
    <input id="submitButton" type="submit" value="send" /></form> 
 
    </div>

Answer 2

你沒有添加值組合框，組合框必須像

<select name="select2" required="" onchange="Select(this.value);"> 
    <option disabled="disabled" selected="selected" value=""></option> 
    <option value="option 1">option 1</option> 
    <option value="option 2">option 2</option> 
    <option value="option 3">option 3</option> 
</select> 

並有一些語法錯誤在你的js腳本還

請嘗試以下代碼

語法，如果其他錯誤

<script>function Select(val) { 
    var element=document.getElementById("options1"); 
    var element2=document.getElementById("options2"); 
    var element3=document.getElementById("options3"); 
    if (val=="option 1") 
     element.style.display="block"; 
    else 
     element.style.display="none"; 
if (val=="option 2") 
     element2.style.display="block"; 
    else 
     element2.style.display="none"; 
if (val=="option 3") 
     element3.style.display="block"; 
    else 
     element3.style.display="none"; 

    } 
</script>