javascript - 使用 jquery 控制两个选择输入的组合值

Question

我有两个简单的选择输入，它们具有相同的值，从 0% 到 50%。我想控制它们的值，使它们的值加起来不超过 50%。因此，无论两个输入中的哪一个发生变化，另一个输入的值也会相应改变。 假设第一个输入的值为 5%，则第二个输入的值为 45%，反之亦然。 我尝试将 .change 函数与 if/else if 语句一起使用，但我无法让它工作。不用说我对 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

如果您更改，您的代码将起作用

$this.value 到 this.value 或将 this 分配给 $this (var $this = this);

但是，这可以通过非常简单的方式完成

$('#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>