Navigate to next page after making selection using Visible Values ​​option

Question

I'm trying to create a flow using HTML (code at bottom) I select "Cisco" and then go to the next box for me to select a type, I select "PE Router" and then go to the next set of options and select the device and so on until I'm done

How do I create something similar to continue? It will be used for troubleshooting to check and verify the steps that have been completed and what to try or do next, depending on the option selected.

Photo Example (https://i.stack.imgur.com/EAgGs.png)

---

<label for="cars">Choose device</label><br>
<select class="detail-ta" id="detail-ta2" size="3">
   <option style="text-overflow: clip; overflow: visible; white-space: -moz-pre-wrap; white-space: pre-wrap; margin-bottom: 1px;"></option>
  <option value="Cisco">Cisco</option>
  <option value="Juniper">Juniper</option>
  <option value="Rad">Rad</option>
  <option value="Adva">Adva</option></option>
</select>
<br>
<br>
<label for="Cisco Device type">Choose Type</label><br>
<select class="detail-ta" id="detail-ta2" size="3">
    <option style="text-overflow: clip; overflow: visible; white-space: -moz-pre-wrap; white-space: pre-wrap; margin-bottom: 1px;">
   <option value="PE Router">PE Router</option>
  <option value="Router">Router</option>
  <option value="Switch">Switch</option>
</select>
<br>
<br>
<label for="Cisco PE DEVICE">Choose Cisco PE device</label><br>
<select class="detail-ta" id="detail-ta2" size="4">
    <option style="text-overflow: clip; overflow: visible; white-space: -moz-pre-wrap; white-space: pre-wrap; margin-bottom: 1px;">
   <option value="9000">Cisco ASR 9000</option>
  <option value="1000">Cisco ASR 1000</option>
  <option value="920">Cisco ASR 920</option>
    <option value="560">NCS 560</option>
</select>

I want it to go to that step when selecting an option For example "Yes" will go to the next option

With photo example (https://i.stack.imgur.com/4aWCd.png)

Answer 1

You can do this using JavaScript.

First, you should set a special ID for the selected box; then this code will work:

<script>
    var SelectBox1 = document.getElementById("detail-ta2");
    var SelectBox2 = document.getElementById("detail-ta3");
    var SelectBox3 = document.getElementById("detail-ta4");
    SelectBox1.addEventListener("change", () => {
        if(SelectBox1?.value && SelectBox1.value != ''){
            SelectBox2.style.display = 'block';
        } else {
            SelectBox2.style.display = 'none';
        }
    }
    SelectBox2.addEventListener("change", () => {
        if(SelectBox2?.value && SelectBox1.value != ''){
            SelectBox3.style.display = 'block';
        } else {
            SelectBox3.style.display = 'none';
        }
    }
</script>