jquery - 如何通过更改另一个选择框的选项来增加我的选择框的选项值？

Question

我有两个选择框:

<select class="years">
  <option value="1">1 year</option>
  <option value="5">5 years</option>
</select>

<select class="factor">
  <option value="1">normal</option>
  <option value="2">double</option>
</select>

当选择double时，我希望我的years选择框显示其值的双倍，这意味着我希望我的结果是:

<select class="years">
  <option value="2">2 year</option>
  <option value="10">10 years</option>
</select>

我不知道该怎么做。这是我的尝试:

$("select").change(function(){
    var factor = $('.factor').find("option:selected").val();
    $('.years').find("option").val((this).val*factor );
    $('.years').find("option").text((this).val*factor + 'years');
} 

https://jsfiddle.net/h6735db4/2/

Answer 1

您可以按照以下方式进行操作。

var normal = $('.years option').map(function() {
  return this.value;
}).get(); //get initial/normal values

$(".factor").change(function() {
  var val = this.value;

  $('.years option').each(function(i) {
    var value = normal[i] * val;
    var text = value == 1 ? value + ' year' : value + ' years';
    $(this).val(value).text(text);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="years">
  <option value="1">1 year</option>
  <option value="5">5 years</option>
</select>

<select class="factor">
  <option value="1">normal</option>
  <option value="2">double</option>
</select>