How to make a select box visible depending on an option picked from a different select box

Question

I am currently trying to make a select box visible only if the user selects a specific option from the previous select box. I've been trying for a few hours, but I can't seem to get anywhere. Here is my code:

    <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>

Any suggestions would be greatly appreciated.

Edit: Terrymorse's code worked perfectly, but after editing my code, I ran into another problem. I may need to redo my code.

Code:

<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>

If I choose only X1 or only legacy, it is still showing the output for the type of box I did not install. I don't want that happening.

Answer 1

Alright, the code was a little bit messy, the main issues were:

• The code was sitting in a <style> tag which is meant for using CSS, not JS
• If the code were to run if in a correct <script> tag then only the initial value of the field would be present at all times in variable a which means it'll never trigger the event.

But there is definitely a good side to the code, you've built a simple toggling mechanism after all, you just implemented it wrong :)

My changes:

• Changed: onclick="myFunction();"
  To: onclick="myFunction2(this)"

  Passing this as an argument to the function references the element itself, this means that we can get the value directly from the parameter within the function.

• Changed: id = "abc"
  To: id="abc"

  Simply removed the spaces to prevent any quirks.

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>

Answer 2

You have these two statements in global space, so they only get evaluated when the page loads:

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

The should be moved inside of myfunction2(), so they get evaluated when the function is called.

Here's a working jsfiddle.

Answer 3

You get the value of a drop-down select list using its selectedIndex property. Do this:

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>