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

Question

我有两个简单的 select 输入，它们的值相同，从 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

您遇到了两个问题。

您需要将所有语句更改为喜欢：

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

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

Answer 2

在两个 select 框上放置一个侦听器，做一些数学运算来计算出另一个值需要是什么，然后检查我们需要更改哪个元素。

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

如果您更改了代码，您的代码将正常工作

$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 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>

您将需要这样的东西（参见链接的代码段）。

Answer 5

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

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

希望对您有所帮助。

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

Controlling combined value of two select inputs with jquery

html

javascript

jquery

input