CODEWITHSUNDEEP
jquery
Mr Joe
Mr Joe

Reputation: 131

How do I limit two select option to match some value?

How do I make if user select_a = 4 and select_b user can select 1 only.

User can select any value on A or B and total for both must equal to 5

<select name="select_a" id="select_a">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select name="select_b" id="select_b">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Upvotes: 1

Views: 143

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you can use something like this

$(document).ready(function(){
    $('select').on('change',function(){
        var select1 = parseInt($('#select_a').val()); // get select1 value
        var select2 = parseInt($('#select_b').val()); // get select2 value
        if($(this).attr('id') == 'select_a'){ // if this selector with id select_d
            var value = 5 - select1 ; // get the value minus 5
            $('#select_b').find('option:not([value="'+value+'"])').prop('disabled',true); // disable all option in the select2 but not the one which equal to 5
        }else{ // same thing with select with id select_b
           var value = 5 - select2 ;
           $('#select_a').find('option:not([value="'+value+'"])').prop('disabled',true);
        }
        //check if total is 5  disable all option again to false and make it selectable
        if(select1 + select2 == 5){
            $('select > option').prop('disabled',false);
        }
    });
});

ًWorking DEMO

But in another way .. let's say we can select the another select with value which will equal with 5 .. like so

$(document).ready(function(){
    $('select').on('change',function(){
        var select1 = parseInt($('#select_a').val());
        var select2 = parseInt($('#select_b').val());
        if($(this).attr('id') == 'select_a'){

            var value = 5 - select1 ;
            $('#select_b').find('option[value="'+value+'"]').prop('selected',true);
        }else{
           var value = 5 - select2 ;
          $('#select_a').find('option[value="'+value+'"]').prop('selected',true);
        }
    });
});

DEMO

Upvotes: 1

TheVillageIdiot
TheVillageIdiot

Reputation: 40527

You need to hook change event of select_a and update option elements in select_b like:

$("#select_a").change(function () {
    l = 'Change<br/>';
    var o = $(this).find("option:selected");

    var v = +$(o).val();
    $.each($("#select_b option"), function (a, b) {
        $b=$(b),bv=+$b.val();
        if (bv + v !== 5) {
            $b.attr("disabled", true);
        } else {
            $b.removeAttr("disabled", false);
        }
    });
});

In same way you can hook up select_b. But hooking up change for both pretty much cripples it on first change to second select. As when user select 2 from select_a, we only have 3 enabled in select_b. Now if user selects 3 in select_b and we process change event for it. This will only leave 2 enabled in select_a. So it is a dead end.

Here is fiddle

Upvotes: 1

Alvaro Montoro
Alvaro Montoro

Reputation: 29695

A possible solution:

  • Add an event listener to both select that is triggered onchange
  • Add the value of the recently changed select to the value of each option on the other select:
    • If the addition is <= 5, enable the option.
    • IF the addition is > 5, disable the option.

Here is a demo:

$(document).ready(function() {
  
  // for the selects in the page
  $("select").on("change", function() {
  
    // save the value of the modified val
    var val = $(this).val();
  
    // check the other select options
    $("select").not(this).find("option").each(function() {
        
      // enable the option if it the value addition is <= 5
      if (parseInt($(this).val()) + parseInt(val) <= 5) {
        $(this).prop("disabled", false);
      }
      // or disable it if the addition is higher than 5
      else {
        $(this).prop("disabled", true);
      }
      
    });
  
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="select_a" id="select_a">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select name="select_b" id="select_b">
    <option value="0">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Upvotes: 1

Related Questions