javascript - 如何显示所选商品的附加值？

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我正在尝试显示所选复选框的附加值。代码如下:

<div class="form-group">
    <div class="col-sm-8">
        <select style="background-color:#1abc9c;border-color:#1abc9c;">
                    <option value="" selected>How Many People?</option>
                    <option name="people" value="5">5</option>
                    <option name="people" value="10">10</option>
                    <option name="people" value="15">15</option>
                    <option name="people" value="20">20</option>
                    <option name="people" value="25">25</option>
                    <option name="people" value="30">30</option>
                  </select>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-8">
        <select>
                    <option value="" selected>How Many Candles?</option>
                    <option name="amount" value="100">100</option>
                    <option name="amount" value="150">250</option>
                    <option name="amount" value="500">500</option>
                    <option name="amount" value="1000">1,000</option>
                    <option name="amount" value="1500">1,500</option>
                    <option name="amount" value="2000">2,000</option>
                  </select>
    </div>
</div>
<div class="form-group">
    <div class=" col-sm-8">
        <span>$0.00</span>
    </div>
</div>

我想根据所选选项更改跨度标签之间的成本。我希望每个都有一个可能的结果。

1.) 人数 = 5，金额 = 100，则值(value)等于 3.80 美元2.)...
3.)...
4.)...
5.)...

任何意见都会很棒吗？

Answer 1

我是用纯 Javascript 做的，但用 JQuery 会更好

检查这个Jsfiddle

<div class="form-group">
    <div class="col-sm-8">
        <select onchange="cost()" id="people" style="background-color:#1abc9c;border-color:#1abc9c;">
            <option value="" selected>How Many People?</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="25">25</option>
            <option value="30">30</option>
        </select>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-8">
        <select onchange="cost()" id="amount">
            <option value="" selected>How Many Candles?</option>
            <option value="100">100</option>
            <option value="150">250</option>
            <option value="500">500</option>
            <option value="1000">1,000</option>
            <option value="1500">1,500</option>
            <option value="2000">2,000</option>
        </select>
    </div>
</div>
<div class="form-group">
    <div class=" col-sm-8">
        <span id="cost">$0.00</span>
    </div>
</div>


<script type="application/javascript">
    function cost() {
        oPeople = document.getElementById('people');
        oAmount = document.getElementById('amount');
        oCost = document.getElementById('cost');

        iPeople = oPeople.options[oPeople.selectedIndex].value;
        iAmount = oAmount.options[oAmount.selectedIndex].value;

        oCost.innerHTML = iPeople * iAmount;
    }
</script>