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

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);
});

小提琴

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");

函数计算价格（）{

setText(totalprice, ++pricetotal);

}

函数 setText(e, s) {

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

}

setText(totalprice, pricetotal);

prod1.addEventListener("改变", calcPrice, false); prod2.addEventListener("改变", calcPrice, false);