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>

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

你有两个问题在继续。

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

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

$这不是jquery中的有效选择器。 .value不能与jQuery选择器混合使用。

Answer 4

＆＃13;

$("#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 + "%");
  }
});

＆＃13;

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

＆＃13;

您需要这样的内容（请参阅链接的代码段）。

Answer 5

$（'＃myselect1'）。change（function（）{if（$（this）.val（）＆lt; 50）{var value = 50 - $（this）.val（）; $（ '＃myselect2'）VAL（值）。 } else if（$（this）.val（）== 50）{$（'＃myselect2'）。val（0）; }}）;

$（'＃myselect2'）。change（function（）{if（$（this）.val（）＆lt; 50）{var value = 50 - $（this）.val（）; $（ '＃myselect1'）VAL（值）。 } else if（$（this）.val（）== 50）{$（'＃myselect1'）。val（0）; }}）;

希望这会对你有所帮助。

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

5 个答案: