How to use one Select>Option to enable another Select>Option in HTML form

Question

I am creating HTML/PHP form, in which I want to make two dropdown lists. First one should be visible all the time, and depending on what is selected in it, a second one should be revealed.

I have tried the code below to see if that works, but for some reason server is showing me #500 Error. Tried to Google it but usually find some Java codes, and I am not too familiar with it unfortunately.

form.php

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta http-equiv='Content-Type' CONTENT='text/html; charset=utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name='GENERATOR'>
        <meta name='ProgId'>
        <SCRIPT>
            function makevisible(cur,which){
                if (which==0)
                    cur.filters.alpha.opacity=100
                else
                    cur.filters.alpha.opacity=50
            }
        </SCRIPT>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <div class='form-item message-error' style='display: inline-block;' data-tooltip='Option'>
            <select size='1' id='selectornr01' class='form-text'>
                <option value='0' selected>Choose Option</option>
                <option value='1'>Option One</option>
                <option value='2'>Option Two</option>
            </select>
        </div>
        <div class='form-item message-error' style='display: inline-block;' data-tooltip='SubOption'>
            <select size='1' id='sub1' class='form-text'>
                <?php
                    if ($selectornr01 == 0) {
                        echo 'Choose Option' ;
                    }
                    elseif ($selectornr01 == 1) {
                        include('01_file.html') ;
                    }
                    else ($selectornr01 == 2) {
                        include('02_file.html') ;
                    }
                ?>
            </select>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

01_file.html

<option value='' selected>Choose Sub Option</option>
<option value='subOption1'>Sub Option One</option>
<option value='subOption2'>Sub Option Two</option>
<option value='subOption3'>Sub Option Three</option>

02_file.html

<option value='' selected>Choose Sub Option</option>
<option value='diffOption1'>Different Option One</option>
<option value='diffOption2'>Different Option Two</option>
<option value='diffOption3'>Different Option Three</option>

So basically the point is when you select an option in first dropdown list - selectornr01 - in second div bunch of options should show up.

You won't achieve that using `PHP` which is server-side programming language. Browser-based `JS` is way to go. — Kacper Turowski, Jul 24 '19 at 06:28
Where is `$selectornr01` coming from? If that variable should depend on what is selected in the first dropdown then that will not work ( see [difference-between-client-side-and-server-side-programming](https://stackoverflow.com/q/13840429/4202224). You would need some sort of javascript to achieve that — empiric, Jul 24 '19 at 06:29
Side note: You have added jQuery and Bootsrap twice in your code — empiric, Jul 24 '19 at 06:31
Yes, unfortunately this is not how PHP works, hence the error 500 because the variable is not defined anywhere. If you want to leave the options in seperate html files and include them via PHP you would need to use an [ajax](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started) call, alternatively you could include the options in your html and show/hide them depending on the selection (but be aware when adding another dropdown to give each a unique ID) — empiric, Jul 24 '19 at 06:36
Thank you guys. I was afraid that I will not be able to do it in pure PHP, hence will need to learn a bit of JQ — Blade007zg, Jul 24 '19 at 06:55

empiric · Accepted Answer · 2019-07-24T06:58:00.987

To give you an idea what you can do using javascript (jQuery):

Add an event listener to the first dropdown and show/hide the secondary dropdowns depending of the selected value.

$('#selectornr01').on('change', function() {
  val = parseInt($(this).val());
  $('.sub').hide();
  if (val === 1) {
    $('#sub1').show();
  } else if (val === 2) {
    $('#sub2').show();
  }
});

//Or in plain JS

var selection = document.getElementById("selectornr01");
selection.addEventListener("change", function() {
  var val = parseInt(selection.value);
  [].forEach.call(document.getElementsByClassName('sub'), function(el) {
    el.style.display = 'none';
  });
  if (val === 1) {
    document.getElementById("sub1").style.display = "block";
  } else if (val === 2) {
    document.getElementById("sub2").style.display = "block";
  }
});

.sub {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='Option'>
  <select size='1' id='selectornr01' class='form-text'>
    <option value='0' selected>Choose Option</option>
    <option value='1'>Option One</option>
    <option value='2'>Option Two</option>
  </select>
</div>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='SubOption'>
  <select size='1' id='sub1' class='form-text sub'>
    <option value='' selected>Choose Sub Option</option>
    <option value='subOption1'>Sub Option One</option>
    <option value='subOption2'>Sub Option Two</option>
    <option value='subOption3'>Sub Option Three</option>
  </select>
  <select size='1' id='sub2' class='form-text sub'>
    <option value='' selected>Choose Sub Option</option>
    <option value='diffOption1'>Different Option One</option>
    <option value='diffOption2'>Different Option Two</option>
    <option value='diffOption3'>Different Option Three</option>
  </select>
</div>

This is exactly what I was looking for! Thank you so much! Will try to adapt it into my form! Once more, thank you! — Blade007zg, Jul 24 '19 at 06:56
You are welcome, I also add a plain JS version of the code in case you don't want to rely on jQuery — empiric, Jul 24 '19 at 06:59

How to use one Select>Option to enable another Select>Option in HTML form

1 Answers1