我有以下形式:
<select name="Country" id="select2-basic" tabindex="1" class="span7">
<option value="All Countries">All Countries</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="UK">United Kingdom</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
</select>
<select name="Quantity" id="select3-basic" tabindex="1" class="span1">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
</select>
<input class="span1" readonly type="text" name="Visitors" value="">
<input class="span1" readonly type="text" name="Price" value="">
现在我根本不是jquery专家,所以我需要帮助才能使其工作。我为国家/地区提供以下价格:
美国:15美元
英国:30美元
所有其他国家/地区:$ 15
我想做的是:
当用户从“数量”选择框中选择一个值时,在“访客”输入字段中显示该数字乘以千。
当用户选择例如国家美国和数量= 5,以在“价格”字段中显示值,该值为75美元,或者如果用户选择英国以显示150美元
我还将为新国家/地区扩展新价格,因此我需要稍后在JS或JQuery中可以轻松更改/添加的内容。
非常感谢你们!
最佳答案
你可以试试这个
$(function(){
var prices = { 'United States':15, 'United Kingdom':30 };
$('#select2-basic, #select3-basic').on('change', function(){
if(this.name == 'Quantity'){
$('input[name="Visitors"]').val(+this.value*1000);
$('input[name="Price"]')
.val(prices[$('#select2-basic').val()] ? (prices[$('#select2-basic').val()]*this.value) : (15*this.value));
}
else if(this.name == 'Country'){
$('input[name="Price"]')
.val(prices[this.value] ? (prices[this.value]*$('#select3-basic').val()) : (15*$('#select3-basic').val()));
}
});
}).trigger('change'); // updated on request
DEMOS:jdFiddle或jsBin,updated demo。