If the selected option is greater than others, disable other options

Question

I have two Selectbox groups. When the user selects an item from the 1st Selectbox group; According to the selected Value, I want to disable some of the items in the 2nd Selectbox group.

Below is my sample code. The example scenario I want to do based on the following set of code is as follows:

<select name="group1" id="group1">
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
  <option value="21">Opt 3</option>
  <option value="22">Opt 4</option>
  <option value="24">Opt 5</option>
  <option value="35">Opt 6</option>
  <option value="57">Opt 7</option>
  <option value="62">Opt 8</option>
</select>

<select name="group2" id="group2">
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
  <option value="21">Opt 3</option>
  <option value="22">Opt 4</option>
  <option value="24">Opt 5</option>
  <option value="35">Opt 6</option>
  <option value="57">Opt 7</option>
  <option value="62">Opt 8</option>
</select>

For example: If the user selects <option value="22">Opt 4</option> from the 1st Selectbox,

In Selectbox 2. group this option items should automatically become "disabled" in the group:

<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>

So what I want to do is as follows: According to the value values in the Selectbox, after each item selection, it should be able to select larger values of the current selection in the other Selectbox step.

So what have you tried? We know what you need but you get more help when you show your attempts to solve your own issue — charlietfl, Jun 10 '21 at 20:07
Show your best guess at how this would work, even if it's just describing the sequence step by step. — Kinglish, Jun 10 '21 at 20:10

Kinglish · Answer 1 · 2021-06-10T20:36:13.337

Using the jQuery on('change' listener, we can access the current selected value with $(this).val() - then loop through the second select, setting .prop('disabled' to true/false based on it's value being equal to or less than the first selected value. Because we're comparing Numbers but the values we're getting are strings, we need to convert them with Number(), parseInt() or the shorthand prefix operator +

$('#group1').on('change', function() {
  let val = Number($(this).val());
  $('#group2 option').each(function() {
    $(this).prop('disabled', Number($(this).val()) <= val)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="group1" id="group1">
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
  <option value="21">Opt 3</option>
  <option value="22">Opt 4</option>
  <option value="24">Opt 5</option>
  <option value="35">Opt 6</option>
  <option value="57">Opt 7</option>
  <option value="62">Opt 8</option>
</select>

<select name="group2" id="group2">
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
  <option value="21">Opt 3</option>
  <option value="22">Opt 4</option>
  <option value="24">Opt 5</option>
  <option value="35">Opt 6</option>
  <option value="57">Opt 7</option>
  <option value="62">Opt 8</option>
</select>

@ozan - did this solve your question? Did the other answer? If either did, please choose one and mark as the answer. Thanks — Kinglish, Jun 15 '21 at 18:58

Serhan Yavçin · Answer 2 · 2021-06-10T21:02:19.277

$('#group1').on('change' , function(){
  
  var value = $(this).find('option:selected').val();
  
  $('#group2').find('option').prop('disabled',false);
  
  $('#group2').find('option').each(function(i,e){
  
    var opt = $(e);
    
    if(opt.val() < value){
      opt.prop('disabled',true);
    }
  })

  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="group1" id="group1">
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
  <option value="21">Opt 3</option>
  <option value="22">Opt 4</option>
  <option value="24">Opt 5</option>
  <option value="35">Opt 6</option>
  <option value="57">Opt 7</option>
  <option value="62">Opt 8</option>
</select>

<hr>

<select name="group2" id="group2">
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
  <option value="21">Opt 3</option>
  <option value="22">Opt 4</option>
  <option value="24">Opt 5</option>
  <option value="35">Opt 6</option>
  <option value="57">Opt 7</option>
  <option value="62">Opt 8</option>
</select>

I am sharing an example above. When there is a change in the first selectbox, it takes the selected value and compares the second selectbox, if the selected value is large, it adds a disabled attribute.

Boolean attributes should be set with `prop` rather than `attr`. See [`.prop()` vs `.attr()`](https://stackoverflow.com/q/5874652/215552). — Heretic Monkey, Jun 10 '21 at 20:31
Thank you for your comment. Yes prop can be used instead of attr :) — Serhan Yavçin, Jun 10 '21 at 20:37
Yeah, I'm not saying it *can* be used. I'm saying it *should* be used. In other words, your code *might* work with `attr`/`removeAttr`, but it *will* work with `prop`. — Heretic Monkey, Jun 10 '21 at 20:40

If the selected option is greater than others, disable other options

2 Answers2