根据表单内的选择菜单值计算值

Question

我有以下表格：

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

我想做的是：

1. 当用户从数量选择框中选择一个值时，在访客输入字段中显示该数字乘以千。
2. 当用户选择例如国家美国和数量 = 5，在价格字段中显示价值 75 美元或如果用户选择英国显示 150 美元

我也会为新的国家/地区花费新的价格，所以我需要稍后可以在 JS 或 JQuery 中轻松更改/添加的东西。

非常感谢大家！

Answer 1

使用.change() 事件非常简单。您还应该使用value 属性来分配每个国家/地区的数字（例如：美国的值是 15）

//Quantity
$("#select3-basic").change(function() {
    var value = parseInt(this.value);
    value = value * 1000;

    $('input[name="Visitors"]').val(value);
});

//Country (change values to be the number to multiply!
$("#select2-basic").change(function() {
    var countryVal = parseInt($(this).data("quantity"));
        quantityVal = parseInt($("#select3-basic").val()),
        value = countryVal * quantityVal;

    $("input[name=Price]").val(value);
});

Answer 2

你可以试试这个

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

演示：jdFiddle 或 jsBin、updated demo。

Answer 3

这应该适合你：

   var quantity;
   $("select[name='Quantity']").on('change',function(){
     quantity = parseInt(this.value);
     $("input[name='Visitos']").val(quantity*1000);
   });

  $("select[name='Country']").on('change',function(){
     if(typeof quantity!="undefined" && quantity!=null){
       var priceVal = this.value=="United Kingdom"?30*quantity : 15*quantity;
       $("input[name='Visitos']").val(priceVal);
    }
   });

if(typeof quantity!="undefined" && quantity!=null) 条件将检查是否选择了数量。

这是来自 Jquery 文档的关于上面使用的 .val() 和 .on() 方法的一些信息。

编辑： 你可以改
$("input[name='Visitos']").val(priceVal);
到
$("input[name='Visitos']").val("$"+priceVal);
如果您想在值前加上 $ 符号