javascript - 如何使选择框动态化

Question

这里有三个选择框来选择格式、金额和运输类型。选择后，会自动计算价格。

这里，这些选择框的样子:

<p>Format: <select class="calculate" name="format">
    <option value="0">Please Select</option>
    <option value="0">Format 1</option>
    <option value="0">Format 2</option>
    </select></p>

<p>Amount: <select class="calculate" name="amount">
    <option value="0">Select amount</option>
    <option value="247">250pcs</option>
    <option value="279">1,000pcs</option>
    <option value="389">2,500pcs</option>
    </select></p>

<p>Shipping type: <select id="surcharge" name="shipping">
    <option value="0">Select Shipping</option>
    <option value="10%">Standard</option>
    <option value="15%">Express</option>
    </select></p>

目前，两种格式(格式1/格式2)的金额相同。

我想做的是:对于格式1，当前金额将保持不变，但如果用户选择格式 2 那么金额将如下所示:

        <option value="0">Select amount</option>
        <option value="300">250pcs</option>
        <option value="350">1,000pcs</option>
        <option value="400">2,500pcs</option>

其中值不同!我怎样才能实现这个目标？

这里是 JSfiddle

预先感谢您的帮助!

Answer 1

您应该首先在数组中设置新值。因此，您可以在更改第一个选择的同时循环遍历它们。

然后您可以轻松地从第二个选择中获取选项，并使用正确的新值更新它们:

    $(".calculate, #surcharge").on("change", function(){
    if($(this).val() == 1)
    {
        var amountValues = new Array(0,250,400,500);

        $("#menge option").each(function(key,value)
        {
            $(this).val(amountValues[key]);
          });
    } else if($(this).val() == 2)
    {
        var amount Values = new Array();
       // .....
    }
});

http://jsfiddle.net/7Bfk5/15/