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.