javascript - 使用 Javascript 获取选择输入并在另一部分使用数据

Question

我有一段 html 允许用户在下拉选项中选择计费条款。我需要编写 javascript 来获取所选选项的值并将其用于不同的部分。

我的 HTML:

<div class="payment-term">
   <label>Billing period:</label>
   <select id="billing-price" name="billing-term" class="selectpicker">
     <option value="200">12 Months: $200/mo. (Save 20%)</option>
     <option value="250">1 Month: $250/mo.</option>
   </select>
</div>
<div class="card-charge-info">
    Your card will be charged $<span id="payment-total"></span> now, and your subscription will bill $<span id="payment-total"></span> every month thereafter. You can cancel or change plans anytime.
</div>

我启动的 Javascript:

var e = document.getElementById("#payment-term");
var stringPmt = e.options[e.selectedIndex].value;

我启动的 JSFIDDLE:http://jsfiddle.net/rynslmns/DcJ4f/1/

Answer 1

您需要将一个事件附加到您的选择框，并分别更新两个价格(使用它们自己的 ID)。

var select = document.getElementById('billing-price');
select.addEventListener('change', updatePrice, false);

function updatePrice(e) {
    var price = select.value;
    document.getElementById('payment-total').innerText = price;
    document.getElementById('payment-rebill').innerText = price;   
}

这是你的 fiddle :http://jsfiddle.net/DcJ4f/2/