Question

所以我对这种东西很有新意，但我有这种奇怪的形式我想做。这个想法是一个预订表格，当用户选择一个新选项时，价格会自动更新。

现在它适用于复选框。但我无法弄清楚它如何适用于我的下拉菜单。

有人可以帮帮我吗？我试过像选择选项：选择＆＃39;但是我很丢失。

HTML代码：

    <div id="base-price">
        <h1>Kosten reis</h1>
    </div><!-- /base-price-->
    <br><br>
    <div id="price-premium">
        <h4>Toeslagen</h4>
        <p><input type="checkbox" value="Crows feet" rel="50">Toeslag hoogseizoen (juli, augustus) <span class="pricing-color">+ 50,00</span></p>
        <p><input type="checkbox" value="Frown lines" rel="40">Toeslag vertrek vrijdag/zaterdag <span class="pricing-color">+ 40,00</span></p>
        <p><input type="checkbox" value="Individual facial line" rel="385">Toeslag 1 persoonskamer/hut <span class="pricing-color">+ 385,00</span></p>
    </div><!-- /price-premium-->
    <br><br>
    <div id="vehicles">
        <h4>Voertuigen</h4>
        <p><input type="checkbox" rel="110">Motor of scooter <span class="pricing-color">+ 110,00</span></p>
        <p><input type="checkbox" rel="130">Motor met zijspan <span class="pricing-color">+ 130,00</span></p>
        <p><input type="checkbox" rel="250">Auto (maximaal 6m lang en 1,85m hoog) <span class="pricing-color">+ 250,00</span></p>
        <p><input type="checkbox" rel="330">Auto (maximaal 6m lang en 2,45m hoog) <span class="pricing-color">+ 330,00</span></p>
    </div><!-- /vehicles-->
    <br><br>
    <div id="extra-spullen">
        <h4>Gewenste merk auto</h4>
        <select>
            <option rel="200" value="volvo">Volvo</option>
            <option rel="300" value="saab">Saab</option>
            <option rel="500" value="mercedes">Mercedes</option>
            <option rel="700" value="audi">Audi</option>
        </select>
    </div><!-- /extra-spullen-->

    <div id="upgrades">
        <h4>Upgraden van hut op ferry</h4>
        <p style="font-style: italic;">prijzen zijn voor retour overtocht per hut.</p>
        <p><input type="checkbox" rel="45">van 2 persoons binnenhut naar 2 persoons zeezichthut (bedden boven elkaar) <span class="pricing-color">+ 45,00</span></p>
        <p><input type="checkbox" rel="96">van 2 persoons binnenhut naar 2 persoons zeezichthut (bedden naast elkaar) <span class="pricing-color">+ 96,00</span></p>
    </div><!-- /upgrades-->
    <br><br>

    <div id="extra">
        <h4>Extra's</h4>
        <p>Off-road experience</p>
        <p><input type="checkbox" rel="360">1 dag off-road training + scenic tour <span class="pricing-color">+ 360</span></p>
        <p><input type="checkbox" rel="630">2 daagse off-road trainig + scenic tour <span class="pricing-color">+ 630,00</span></p>
    </div><!-- /extra-->
    <br><br>

    <div id="price-total">
        <h4>Kosten reis: &euro;<span id="output"></span></h4>
    </div><!-- /price-total-->



</form>
<script src="js/jquery-ui.js"></script>
</div><!-- /wrapper-->

jQuery的代码：

$(document).ready(function() {
function recalculate() {
    var sum = 755;

    $("input[type=checkbox]:checked").each(function() {
        sum += parseInt($(this).attr("rel"));
    });

    $("#output").html(sum);
}

$("input[type=checkbox]").change(function() {
    recalculate();
});

}）;

Answer 1

$(document).ready(function() {
    function recalculate() {
        var sum = 0;

        $("input[type=checkbox]:checked").each(function() {
            sum += parseInt($(this).attr("rel"));
        });

       $( "select" ).each(function() {
    add= $(this).find("option:selected").attr('rel');       
  sum += parseInt(add);
});

        $("#output").html(sum);
    }

    $("input[type=checkbox], select").change(function() {
        recalculate();
    });
});

演示：http://jsfiddle.net/mwwotxat/1/注意：我已添加＆＃39;请选择＆＃39;选项（值：0），更加用户友好....

jQuery：我怎样才能重新计算下拉菜单？

1 个答案: