如何通过更改另一个选择框的选项来乘以我的选择框的选项值？

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>

Answer 2

使用data属性

尝试此示例

＆＃13;

＆＃13;

$(function() {
  $('select.factor').on('change', function() {
      var num = +(this.value);
      $('select.years option').each(function() {
        var opt = $(this);
        var yrs = num * +(opt.data('value'));
        opt
          .val(yrs)
          .text(yrs + ' years');
      });
    })
    .trigger('change');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

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

＆＃13;

＆＃13;

＆＃13;