Question

我已经在JsFiddle上设置了这个：http://jsfiddle.net/melissal/FmEcw/

现在，当我更改“数量”的选择时，下拉，它改变了论文的价格（上图）。我希望这在第二次下拉显示。因此，当您选择“纸张”时，下拉菜单中有两个选项，＆＃39;常规＆＃39;和＆＃39; Premium（+ $ XXX）＆＃39;，但我无法弄清楚如何让新价格显示出来。这可能吗？

这是HTML：

Paper: $<span id="paper_div"></span><br />

<div id="product-options">
<form action="/cart/add" id="ProjectProductForm" method="post" accept-charset="utf-8">
    <div style="display:none;">
        <input type="hidden" name="_method" value="POST"/>
    </div>          
    <div id="product-options-qty">
        <span class="text">Quantity: </span>
        <span class="form">
            <div class="input select">
                <select name="field_6" class="text_select" id="field_6">
                    <option value="225">15 @ $225.00</option>
                    <option value="240">20 @ $240.00</option>
                    <option value="250">30 @ $250.00</option>
                    <option value="270">40 @ $270.00</option>
                </select>
            </div>
        </span>
    </div>
    <div id="product-options-paper">
        <span class="text">Paper: </span>
        <span class="form">
            <div class="input select">
                <select name="field_6" class="text_select">
                    <option value="1">Regular</option>
                    <option value="2">Premium (+ $<span id="paper_div"></span>)</option>
                </select>
            </div>
        </span>
    </div>

</form>

和JS：

$(document).ready(function() {
$("#field_6").change(function() {
    var id = $(this).val();
    $('#price_div').html($(this).val());

    var premium_paper = id * .25;
    var premium_paper = parseFloat(Math.round(premium_paper * 100) / 100).toFixed(2);
    $('#paper_div').html(premium_paper);        
}).change();    
});

Answer 1

尝试使用$('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')')：

请注意，我在第二个选择中添加了ID。您可能还希望为您的下拉菜单提供不同的名称属性。

$(document).ready(function () {
    $("#field_6").change(function () {
        var id = $(this).val();
        $('#price_div').html($(this).val());
        var premium_paper = id * .25;
        var premium_paper = parseFloat(Math.round(premium_paper * 100) / 100).toFixed(2);
        $('#paper_div').html(premium_paper);
        $('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')')
    }).change();
});

<强> jsFiddle example

Jquery / JS - 更新下拉列表

1 个答案: