使用jQuery控制两个选择输入的组合值

Question

I have two simple select inputs with same values, from 0% to 50% in both of them. I would like to control their values, so that when their values are combined, they do not exceed 50%. So no matter which of the two inputs is changed, the other one will change its value accordingly. So let's say if first input has value 5% the second input should have value of 45% and vice versa. I tried using .change function with an if/else if statement but i just cant get it to work. Needless to say i dont have much expirience with jquery.

HTML:

 <select id="myselect1">
      <option value="0">0%</option>
      <option value="5">5%</option>
      <option value="10">10%</option>
      <option value="15">15%</option>
      <option value="20">20%</option>
      <option value="25">25%</option>  
      <option value="30">30%</option>  
      <option value="35">35%</option> 
      <option value="40">40%</option>  
      <option value="45">45%</option>    
      <option value="50">50%</option>      
    </select>

    <select id="myselect2"> 
      <option value="0">0%</option>
      <option value="5">5%</option>
      <option value="10">10%</option>
      <option value="15">15%</option>
      <option value="20">20%</option>
      <option value="25">25%</option>  
      <option value="30">30%</option>  
      <option value="35">35%</option> 
      <option value="40">40%</option>  
      <option value="45">45%</option>    
      <option value="50">50%</option>     
    </select>

JS:

$('#myselect1').change(function(){
  if ($this.value == '5'){
    $('#myselect2').val('45');
  }
  else if ($this.value == '10'){
    $('#myselect2').val('40');
  }  
  else if ($this.value == '15'){
    $('#myselect2').val('35');
  }
  else if ($this.value == '20'){
    $('#myselect2').val('30');
  }
  else if ($this.value == '25'){
    $('#myselect2').val('25');
  }
  else if ($this.value == '30'){
    $('#myselect2').val('20');
  }
  else if ($this.value == '35'){
    $('#myselect2').val('15');
  }
  else if ($this.value == '40'){
    $('#myselect2').val('10');
  } 
  else if ($this.value == '45'){
    $('#myselect2').val('5');
  }
  else if ($this.value == '50'){
    $('#myselect2').val('0');
  }
});

$('#myselect2').change(function(){
  if ($this.value == '5'){
    $('#myselect1').val('45');
  }
  else if ($this.value == '10'){
    $('#myselect1').val('40');
  }  
  else if ($this.value == '15'){
    $('#myselect1').val('35');
  }
  else if ($this.value == '20'){
    $('#myselect1').val('30');
  }
  else if ($this.value == '25'){
    $('#myselect1').val('25');
  }
  else if ($this.value == '30'){
    $('#myselect1').val('20');
  }
  else if ($this.value == '35'){
    $('#myselect1').val('15');
  }
  else if ($this.value == '40'){
    $('#myselect1').val('10');
  } 
  else if ($this.value == '45'){
    $('#myselect1').val('5');
  }
  else if ($this.value == '50'){
    $('#myselect1').val('0');
  }
});

JS Fiddle

Answer 1

Your code will work if you changed

$this.value to this.value or assign this to $this ( var $this = this );

However, this can be done in a very simple way

 $('#myselect1, #myselect2').change(function() { var who = this.id === 'myselect1' ? '#myselect2' : '#myselect1'; // if the ID of the changed select is #myselect1 who will be #myselect2 or vice versa. $(who).val(50 - this.value); // change the value of the other select }); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="myselect1"> <option value="0">0%</option> <option value="5">5%</option> <option value="10">10%</option> <option value="15">15%</option> <option value="20">20%</option> <option value="25">25%</option> <option value="30">30%</option> <option value="35">35%</option> <option value="40">40%</option> <option value="45">45%</option> <option value="50">50%</option> </select> <select id="myselect2"> <option value="0">0%</option> <option value="5">5%</option> <option value="10">10%</option> <option value="15">15%</option> <option value="20">20%</option> <option value="25">25%</option> <option value="30">30%</option> <option value="35">35%</option> <option value="40">40%</option> <option value="45">45%</option> <option value="50">50%</option> </select> 

Answer 2

Put a listener on both select boxes, do some maths to work out what the other value needs to be and the check to see which element we need to change.

http://jsfiddle.net/qj459ntg/3/

$('select').change(function(){
  var MaxValue = 50
  var CurValue = $(this).val();
  var NewValue = MaxValue - CurValue;
  if ($(this).is('#myselect1')) {
      $('#myselect2').val(NewValue);
  } else {
      $('#myselect1').val(NewValue);      
  }
});

Answer 3

You have two issues going on.

You need to change all your statements to like:

if ($(this).val() == '5'){
    $('#myselect2').val('45');
  }

$this is not a valid selector in jquery. .value cannot be inter,mingled with a jQuery selector.

Answer 4

 $("#select_1").change(function() { var select_1_value = $("#select_1").val(); var select_2_value = $("#select_2").val(); var value_1 = parseInt(select_1_value); var value_2 = parseInt(select_2_value); var sum_values = value_1 + value_2; if (sum_values > 50) { var select_2_needed = value_2 - ((value_1 + value_2) - 50); $("#select_2").val(select_2_needed + "%"); } }); $("#select_2").change(function() { var select_1_value = $("#select_1").val(); var select_2_value = $("#select_2").val(); var value_1 = parseInt(select_1_value); var value_2 = parseInt(select_2_value); var sum_values = value_1 + value_2; if (sum_values > 50) { var select_1_needed = value_1 - ((value_1 + value_2) - 50); $("#select_1").val(select_1_needed + "%"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id = "select_1"> <option>0%</option> <option>5%</option> <option>10%</option> <option>15%</option> <option>20%</option> <option>25%</option> <option>30%</option> <option>35%</option> <option>40%</option> <option>45%</option> <option>50%</option> </select> <select id = "select_2"> <option>0%</option> <option>5%</option> <option>10%</option> <option>15%</option> <option>20%</option> <option>25%</option> <option>30%</option> <option>35%</option> <option>40%</option> <option>45%</option> <option>50%</option> </select> 

You will need something like this (see snippet linked with).

Answer 5

$('#myselect1').change(function(){ if($(this).val() < 50 ){ var value = 50 - $(this).val(); $('#myselect2').val(value); }else if($(this).val() == 50){ $('#myselect2').val(0); } });

$('#myselect2').change(function(){ if($(this).val() < 50 ){ var value = 50 - $(this).val(); $('#myselect1').val(value); }else if($(this).val() == 50){ $('#myselect1').val(0); } });

Hope this will help you.