如何显示所选项目的附加值?

时间:2016-03-23 03:10:28

标签: javascript php jquery html

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

<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。)人= 5&amp;金额= 100然后价值等于3.80美元 2)...
3)...
4)...
5。)...

任何输入都会很棒?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

with open(file,'r',encoding='windows-1251') as f:
  text = f.read()