Question

我这里有三个select-box选择格式，金额＆amp; 送货类型。选择后，它会自动计算价格。

这里，select-box的样子如何：

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

value不同的地方！我怎么能做到这一点？

这里是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/

Answer 2

您可以通过选中正在选择的选项中的text()

来执行此操作

if ($('#sel option:selected').text() === 'Format 2') {
    $('#amt option').each(function () {
        alert($(this).text());
        if ($(this).text() == "250pcs") $(this).val("300");
        else if ($(this).text() == "1,000pcs") $(this).val("350");
        else $(this).val("400");
    });
}

工作fiddle

Answer 3

您可以创建一个执行值/选项替换的函数，并在您选择的更改上调用它。我为你做了一个例子，但是使用静态html选项来替换旧的，这可能不是最好的方法，但试图让它尽可能简单。

HTML

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

<p>Amount: <select class="calculate amount" name="menge">
    <option value="0">Select Menge</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>

<p>Price: <span id="total">0 €</span></p>

的Javascript

    var updateValues = function (){
    if($('.format').val() == 1) {
        html = '<option value="300">300pcs</option>';
        html += '<option value="400">400pcs</option>';
        html += '<option value="500">500pcs</option>';
         $('.amount').html(html);
    } else if( $('.format').val() == 2) {
        html = '<option value="600">600pcs</option>';
        html += '<option value="900">900pcs</option>';
        html += '<option value="1200">1200pcs</option>';
         $('.amount').html(html);
    }
};
$('.format').change(function(){updateValues()});
$(".calculate, #surcharge").on("change", function(){
        var total = 0;
        $('.calculate').each(function() {
            if($(this).val() != 0) {
                total += parseFloat($(this).val());
            }
        });
        if($('#surcharge').val() != 0) {
          total = total * ((100 + parseFloat($('#surcharge').val())) / 100);
        }
        $('#total').text(total.toFixed(2) + ' €');
    });

小提琴链接 http://jsfiddle.net/7Bfk5/23/

如何使选择框动态化

3 个答案: