如何使選擇框可見，取決於從不同的選擇框中選取的選項

Question

我目前正在嘗試使選擇框僅在用戶從上一個選擇框中選擇特定選項時可見。我一直在嘗試幾個小時，但我似乎無法獲得任何地方。 這裏是我的代碼：

<p>Did you install legacy or X1 cable boxes?</p> 

    <select id="test4" onchange="myFunction2()"> 
     <option vlaue="" disabled selected>Select your option</option> 
     <option value="E.A.">Legacy</option> 
     <option value="E.B.">X1</option> 
     <option value="both">both</option></option> 
    </select> 
<hr /> 

<div id = "abc"> 

    <p>How many X1 cable boxes did you install?</p> 

    <select id="test3"> 
     <option vlaue="" disabled selected>Select your option</option> 
     <option value="x1">1</option> 
     <option value="x2">2</option> 
     <option value="x3">3</option> 
    </select> 
</div> 

<script type="text/javascript"> 

    var abcd = document.getElementById("abc"); 
    abcd.style.display = 'none'; 

    var a = document.getElementById("test4").value; 
    var c = document.getElementById("test3").value; 

    function myFunction2() { 
     if (a == "E.B.") { 
      abcd.style.display = 'block'; 
     } 
     else { 
      abcd.style.display = 'none'; 
     } 
    } 
</script> 

任何建議，將不勝感激。

編輯： Terrymorse的代碼工作完美，但編輯我的代碼後，我遇到了另一個問題。我可能需要重做我的代碼。

代碼：

<p>Did you install legacy or X1 cable boxes?</p> 

<select id="test4" onchange="myFunction2()"> 
    <option vlaue="" disabled selected>Select your option</option> 
    <option value="legacy">Legacy</option> 
    <option value="x1">X1</option> 
    <option value="both">both</option></option> 
</select> 

<hr /> 

<div id = "x1Install"> 

<p>How many X1 cable boxes did you install?</p> 

<select id="test3"> 
    <option vlaue="" disabled selected>Select your option</option> 
    <option value="E.B.x1">1</option> 
    <option value="E.B.x2">2</option> 
    <option value="E.B.x3">3</option> 
</select> 
</div> 

<br /> 
<br /> 

<div id="legacyInstall"> 

<p>How many legacy cable boxes did you install?</p> 

<select id="test5"> 
    <option vlaue="" disabled selected>Select your option</option> 
    <option value="E.A.x1">1</option> 
    <option value="E.A.x2">2</option> 
    <option value="E.A.x3">3</option> 
</select> 

</div> 

<br /> 
<br /> 

<button onclick="myFunction()">Result</button> 

<p id="result"></p> 

<script type="text/javascript"> 

    var x1Install = document.getElementById("x1Install"); 
    var legacyInstall = document.getElementById("legacyInstall"); 

    x1Install.style.display = 'none'; 
    legacyInstall.style.display = 'none'; 

    var legacyOrX1 = document.getElementById("test4").value; 
    var x1Box = document.getElementById("test3").value; 
    var legacyBox = document.getElementById("test5").value; 

    function myFunction2() { 
     var legacyOrX1 = document.getElementById("test4").value; 
     var x1Box = document.getElementById("test3").value; 
     var legacyBox = document.getElementById("test5").value; 

     if (legacyOrX1 == "x1") { 
      x1Install.style.display = 'block'; 
      legacyInstall.style.display='none'; 
     } 
     else if (legacyOrX1 == "legacy") { 
      x1Install.style.display = 'none'; 
      legacyInstall.style.display = 'block'; 
     } 
     else { 
      x1Install.style.display = 'block'; 
      legacyInstall.style.display = 'block'; 
     } 
    } 

    function myFunction() { 
     var legacyOrX1 = document.getElementById("test4").value; 
     var x1Box = document.getElementById("test3").value; 
     var legacyBox = document.getElementById("test5").value; 
     document.getElementById("result").innerHTML = (x1Box) + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + (legacyBox); 
    } 
</script> 

如果我只選擇X1或唯一遺產，它仍然顯示了我沒有裝框的類型的輸出。我不希望發生這種情況。

Answer 1

您使用selectedIndex屬性獲取下拉選擇列表的值。 這樣做：

var abcd = document.getElementById("abc"); 
 
abcd.style.display = 'none'; 
 
var a = document.getElementById("test4"); 
 
var c = document.getElementById("test3"); 
 
function myFunction2() { 
 
    if (a.options[a.selectedIndex].value == "E.B.") { 
 
     abcd.style.display = 'block'; 
 
    } 
 
    else { 
 
     abcd.style.display = 'none'; 
 
    } 
 
}

<p>Did you install legacy or X1 cable boxes?</p> 
 

 
    <select id="test4" onchange="myFunction2()"> 
 

 
     <option vlaue="" disabled selected>Select your option</option> 
 

 
     <option value="E.A.">Legacy</option> 
 

 
     <option value="E.B.">X1</option> 
 

 
     <option value="both">both</option></option> 
 

 
    </select> 
 

 
<hr /> 
 

 
<div id = "abc"> 
 

 
    <p>How many X1 cable boxes did you install?</p> 
 

 
    <select id="test3"> 
 

 
     <option vlaue="" disabled selected>Select your option</option> 
 

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

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

 
     <option value="x3">3</option> 
 

 
    </select> 
 

 
</div>

Answer 2

你必須在全球空間這兩個語句，所以他們只得到評估頁面加載時：

var a = document.getElementById("test4").value; 
var c = document.getElementById("test3").value; 

的應該的myfunction2()內部移動，所以當函數被調用時它們會被評估。

這是working jsfiddle。

Answer 3

好吧，代碼是有點亂，主要問題是：

• 代碼是坐在<style>標籤，它是爲使用CSS，JS就不叫
• 如果代碼是給如果在正確的<script>標籤中運行，那麼只有該字段的初始值將始終存在於變量a中，這意味着它永遠不會觸發該事件。

但肯定是有好的一面的代碼，你已經建立了一個簡單的交替切換機制畢竟，你只是實現了它錯了:)

我的變化：

• 改變：onclick="myFunction();"
  要：onclick="myFunction2(this)"

  傳遞this作爲參數傳遞給函數引用ELE這意味着我們可以直接從函數中的參數獲取值。

• 更改：id = "abc"
  要：id="abc"

  只需刪除空間，以防止任何怪癖。

function myFunction2(elem) { 
 
    if (elem.value == 'E.B.') { 
 
    abc_div.style.display = 'block'; 
 
    } else { 
 
    abc_div.style.display = 'none'; 
 
    } 
 
} 
 

 
window.onload = function() { 
 
    window.abc_div = document.getElementById('abc'); 
 
    abc_div.style.display = 'none'; 
 
}

<div> 
 
    <p>Did you install legacy or X1 cable boxes?</p> 
 
    <select id="test4" onchange="myFunction2(this)"> 
 
     <option vlaue="" disabled selected>Select your option</option> 
 
     <option value="E.A.">Legacy</option> 
 
     <option value="E.B.">X1</option> 
 
     <option value="both">both</option> 
 
    </select> 
 
<hr /> 
 
<div id="abc"> 
 
    <p>How many X1 cable boxes did you install?</p> 
 
    <select id="test3"> 
 
     <option vlaue="" disabled selected>Select your option</option> 
 
     <option value="x1">1</option> 
 
     <option value="x2">2</option> 
 
     <option value="x3">3</option> 
 
    </select> 
 
</div>