javascript - 如何显示所选项目的附加值？

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
我正在尝试显示所选复选框的附加值。这是代码：

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

我想根据选择的选项来更改span标签之间的成本。我希望每个都有可能的结果。

1.）People = 5＆Amount = 100 then value equal $ 3.80
2.）
3.）
4。）...
5.）

任何输入都会很棒？

最佳答案

我用纯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>