Question

这看起来很简单，但现在它让我感到很沮丧。

以下是解释的一切，希望有人帮助我，我会为这件简单的事情而疯狂。

<script>var pricetotal=60;</script>
<select id="product-select">
    <option>Black</option>
    <option>Lime</option>
    <option>Navy</option>
    <option>Blue</option>
</select>
    <select id="product-select2">
    <option>Black</option>
    <option>Lime</option>
    <option>Navy</option>
    <option>Blue</option>
</select>
    <!--I have multiple section forms each with different ID..
    // I want to print on page 60$, but when user selects any of the 2 option forms the price will get +5$ for each.
-->

    Total price <script>document.write(pricetotal)</script>

http://jsfiddle.net/coderised/t9AfR/1/

Answer 1

目前还不清楚你想要做什么/想做什么，但我希望这会对你有帮助。

<select id="product-select">
    <option value="Black">Black</option>
    <option value="Lime">Lime</option>
</select>
<select id="product-select2">
    <option value="Navy">Navy</option>
    <option value="Blue">Blue</option>
</select>

Total price <span id="price">60</span>

你说你正在使用jQuery。有了它，您可以添加：

$(document).ready(function() {
    var basePrice = 60, 
    $product_select = $('#product-select'), 
    $product_select2 = $('#product-select2'), 
    calcPrice = function() {
        var price = basePrice;
        switch($product_select.val()) { //Change price based on prod_select1
            case 'Black':
                price += 5;
                break;
            case 'Lime':
                price += 10;
                break;
        }
        switch($product_select2.val()) { //Change price based on prod_select2
            case 'Navy':
                price += 5;
                break;
            case 'Blue':
                price += 10;
                break;
        }
        $('#price').text(price); //Update displayed price
    };
    $product_select.on('change' calcPrice); //When changed, update price
    $product_select2.on('change', calcPrice); //When changed, update price
});

Answer 2

使用JQuery，您可以使用.val()获取所选值，并根据该值执行操作。

http://jsfiddle.net/coderised/t9AfR/1/

Answer 3

$('select').change(function () {
    var s = 60;
    $('select').each(function () {
        if ($(this).val().length) {
            s = s + 5
        }
    });
    alert(s);
});

FIDDLE

Answer 4

我不确定我是否真的回答了你的问题，但我很喜欢这种运动。我将其设置为动态填充实际的$$$金额。我假设您想根据产品组合选择更新价格。我保持简单，因为我不知道你的定价规则等等。但是想想这可以让你继续前进，这是一种与图书馆无关的方法。

http://jsfiddle.net/docluv/WVaRr/6/

var totalprice = document.querySelector(".total-price"),
pricetotal = 60,
prod1 = document.getElementById("product-select"),
prod2 = document.getElementById("product-select2");

function calcPrice（）{

setText(totalprice, ++pricetotal);

}

function setText（e，s）{

if (e.innerText) {
    e.innerText = s;
} else if (e.textContent) {
    e.textContent = s;
}

}

setText（totalprice，pricetotal）;

prod1.addEventListener（“change”，calcPrice，false）; prod2.addEventListener（“change”，calcPrice，false）;

简单的变量更新和写入页面

4 个答案: