Making select options dependant of previous select option

Question

I've got these two dropdowns. I want "select2" options to be dependant of "select1".

Whenever i choose an option-value in "select1" a script should run that checks for all the option-values in "select2" that is lower than the value chosen in "select1" and add the attribute "disabled" to those values.

So for instance, if option "10" is chosen in "select1" then option 3,5,7,8 and 10 should be disabled in "select2". Is this somewhat possible?

                     <div class="form-group">
                        <select class="form-control formSelect select1">
                            <option selected disabled hidden>Choose here</option>
                            <option>3</option>
                            <option>5</option>
                            <option>7</option>
                            <option>8</option>
                            <option>10</option>
                            <option>12</option>
                            <option>14</option>
                            <option>16</option>
                            <option>20</option>
                            <option>25</option>
                            <option>32</option>
                            <option>40</option>
                            <option>42</option>
                            <option>50</option>
                            <option>70</option>
                        </select>
                     </div> 

                     <div class="form-group">
                        <select class="form-control formSelect select2">
                            <option selected disabled hidden>Choose here</option>
                            <option>3</option>
                            <option>5</option>
                            <option>7</option>
                            <option>8</option>
                            <option>10</option>
                            <option>12</option>
                            <option>14</option>
                            <option>16</option>
                            <option>20</option>
                            <option>25</option>
                            <option>32</option>
                            <option>40</option>
                            <option>42</option>
                            <option>50</option>
                            <option>70</option>
                        </select>
                     </div> 

Answer 1

If you want the options in "select2" to depend on the option selected in "select1", then you need to define an event handler on select1.

EXAMPLE (jQuery):

<select class="form-control formSelect" id="select1">
   <option>1</option>
   <option>2</option>
   <option>3</option>
</select>

<select class="form-control formSelect" id="select2">
   <option>A</option>
   <option>B</option>
   <option>C</option>
</select>

<script type="text/javascript">
  $('#select1').change(function (e) {
    var s1 = e.target;
    var s2 = $('#select2');
    // Do whatever you want with s2 based on the value of s1
  });
</script>

Note that in this example we assigned an explicit ID to select1 and select2...

And if you're interested in either a JS or jQuery solution, it's certainly OK to include both tags in your question :)

---

ADDENDUM

I understood your original question as:

Q: What do I need to do so that choosing an option in one HTML select list can change the list items in a second select list?"

The basic answer, which I tried to address, is:

A: 1) You need Javascript (which I'm sure you knew), 2) Use a JS onchange() event listener.

That didn't seem to completely answer your question :( Please look at this post:

https://stackoverflow.com/a/878331/421195

The proper way to achieve the functionality you want is just to remove the options. As you discovered the hard way, disabling individual options is not supported particularly well across browsers

Here is another, rather draconian example. Please let me know if it helps:

EXAMPLE 2 (jQuery):

$('#select1').change(function (e) {
    debugger;
    var s1 = e.target;
    var s2 = $('#select2');
    var selectedOption = s1.value;
    if (selectedOption == '3') {
      var s2Options = s2.empty().data('options');
      s2.append('<option>X</option>');
      s2.append('<option disabled>Y</option>');
      s2.append('<option>Z</option>');
    }
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="select1">Select1</label>
<select class="form-control formSelect" id="select1">
   <option>1</option>
   <option>2</option>
   <option>3</option>
</select>

<label for="select2">Select2</label>
<select class="form-control formSelect" id="select2">
   <option>A</option>
   <option disabled>B</option>
   <option>C</option>
</select>

FEATURES:

• select1 and select2 each have explicit IDs (so you can access them by id).
• select1 has an onchange() event handler so you can do anything you want (like modify the contents of select2).
• In this example, option B in select2 is disabled by default.
• If you choose option 3 in select1, it will rebuild all options in select2. If you want something scalable for a "large #/options", this is probably your best bet.

Answer 2

You can add a value attribute to the first select and a data-showon attribute to the second. Then loop through and show the second based on the value of the first

<select class="form-control formSelect" id="select1" onchange="updateSelect2(this);">
   <option>Choose:</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<select class="form-control formSelect" id="select2">
   <option data-showon="">Choose:</option>
   <option data-showon="1,2">A</option>
   <option data-showon="1,3">B</option>
   <option data-showon="2,3">C</option>
</select>

<script type="text/javascript">
    function updateSelect2(element) {
        const options = document.querySelectorAll('#select2 > option');
        options.forEach(option =>{
          option.style.display = "none";
          let showOnArray = option.dataset.showon;
          showOnArray = showOnArray.split(',');
          if (showOnArray == "") {return;}
          showOnArray.forEach(x =>{
            if (x == element.value) {
                option.style.display = "";
            } 
            });
        });
    }
</script>

In the above code snippet, the options from select2 are shown if the value is in the comma separated list "data-showon".