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

Question

我有两个具有相同值的简单选择输入，它们的值都从 0% 到 50%。我想控制它们的值，这样当它们的值组合在一起时，它们不会超过 50%。所以无论两个输入中的哪一个被改变，另一个都会相应地改变它的值。 因此，假设第一个输入的值为 5%，则第二个输入的值应为 45%，反之亦然。 我尝试使用带有 if/else if 语句的 .change 函数，但我无法让它工作。不用说我对 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>

Answer 2

在两个选择框上放置一个监听器，做一些数学运算来确定另一个值需要是什么，并检查我们需要更改哪个元素。

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

你有两个问题。

你需要把你所有的语句都改成like：

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

$this 不是 jquery 中的有效选择器。 .value 不能与 jQuery 选择器相互混合。

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>

你将需要这样的东西（参见 sn-p 链接）。

Answer 5

$('#myselect1').change(function(){ if($(this).val()

$('#myselect2').change(function(){ if($(this).val()

希望这会对你有所帮助。