CODEWITHSUNDEEP
javascriptjquery
Melissa L
Melissa L

Reputation: 125

Jquery / JS - Update Drop Down

I've got this set up on JsFiddle: http://jsfiddle.net/melissal/FmEcw/

Now when I change the selection of the 'Quantity' dropdown, it changes the price of the paper (above). I want this to show in the 2nd drop down. So when you select the 'Paper' dropdown you see two options, 'Regular' and 'Premium (+ $XXX)', but I can't figure out how to get the new price to show up. Is that possible?

Here's the 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>

And the 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();    
});

Upvotes: 1

Views: 55

Answers (1)

j08691
j08691

Reputation: 208032

Try using $('#field_7 option:eq(1)').html('Premium (+ $'+premium_paper+')'):

Note that I added an ID to the second select. You may also want to give your drop downs different name attributes.

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

Upvotes: 2

Related Questions