我有两个选择框:
<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');
}
答案 0 :(得分:3)
你可以这样做。
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>
答案 1 :(得分:2)
使用data
属性
$(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;