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>

Because I'm certain the solution is supposed to be done in jquery/Javascript — Nissan Pedige, Jul 31 '20 at 21:32
So, if I added to the question: "is this possible to do with jquery"- then it's good to post? — Nissan Pedige, Jul 31 '20 at 21:36
I did plenty of research and i could not find anything that fits what I'm looking for, hence i made this post. What more would you like to see in my post to make it look like more effort coming from my side? — Nissan Pedige, Jul 31 '20 at 22:05

paulsm4 · Answer 1 · 2020-08-01T22:36:19.867

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.

Thank you for answer and clarification! With the solution you just posted, how do i then disable option a, and b from select 2- when option "3" is chosen in select1? — Nissan Pedige, Jul 31 '20 at 21:58
I've edited the original post, so perhaps it's a bit more clear what I'm actually trying to achieve — Nissan Pedige, Jul 31 '20 at 22:26
I understood your 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?" A: 1) You need Javascript (which I'm sure you knew), 2) Use a JS onchange() event listener. That's basically "the answer". I gave a jQuery example. I just added an example for rebuilding the entire list, if you want to go that far ;) Q: Are there any *further* questions you can't figure out yourself? If so, please update your post. — paulsm4, Aug 01 '20 at 22:25

Daniel · Answer 2 · 2020-07-31T22:42:26.210

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

Thanks! this can be used easily if the amount of options isn't that big. Do you have any idea how else it could be fixed, if the amount of options was way more than the current? — Nissan Pedige, Jul 31 '20 at 22:44
Will items from the second select show up for more than just one option from the first select? If so you can optimize this using a template engine, otherwise its a bit more difficult. — Daniel, Jul 31 '20 at 22:46

Making select options dependant of previous select option

2 Answers2