Javascript選擇框會覆蓋在野生動物園中單擊鼠標時的輸入

Question

我輸入的內容不允許輸入。 每當我嘗試單擊輸入時，它都會自動跳回到初始選擇輸入。 有什么建議么？

HTML：

<h4 class="plan-info-header">Plan info</h4>
            <label class="plan-name">Plan name: 
                <select id="billing-plan" name="billing-plan" class="selectpicker">
                    <option>Choose plan</option>
                    <option>Basic</option>
                    <option>Prime</option>
                    <option>Gold</option>
                </select>

            <div class="payment-term">
                <label>Billing period:</label>
                <select id="billing-price" name="billing-term" class="selectpicker" disabled>
                    <option value="0">Choose billing term</option>
                </select>
                <br>
                <label>Advertising Budget:</label>
                <input id="advertising"></input>

<div class="card-charge-info">
Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime. <!-- <span id="test">XXX</span> -->
            </div>

Javascript：

 var term = 0;
 var price = 0;
 var additional = 0;
 var fix = 0;
 var plan = document.getElementById('billing-plan');
 plan.addEventListener('change', enableBilling, false);
 var select = document.getElementById('billing-price');
 select.addEventListener('change', updatePrice, false);

function populateBilling(planName) {
var options = {
    basic: { 
        "Option" : ["$200/month for 1-yr", "$250/month"],
        "Value" : [300, 350]
    },
    prime: { 
        "Option" : ["$300/month for 1-yr", "$350/month"],
        "Value" : [400, 450]
    },
    gold: { 
        "Option" : ["$400/month for 1-yr", "$450/month"],
        "Value" : [500, 550]
    }
}

//RESET BILLING PERIOD OPTIONS
select.options.length = 1;
document.getElementById('payment-total').innerText = 0 + additional;
document.getElementById('payment-rebill').innerText = 0 + additional;
var data = options[planName];
if (data) {
    for (var i = 0; i < data.Option.length; i++){
        var temp = document.createElement('option');
        temp.value = data.Value[i];
        temp.text = data.Option[i];
        select.appendChild(temp);
    }
   }
 }

function enableBilling(e) {
    document.getElementById('billing-price').disabled=false;
    var planName = plan.options[plan.selectedIndex].text.toLowerCase();
    populateBilling(planName);

}

function updatePrice(e) {
    price = parseFloat(select.value);
    fix = 100;
    if (price == select.options[2].value){
        term = 1;
    } 
    document.getElementById('payment-total').innerText = price + additional;
    if (price == select.options[2].value){
    document.getElementById('payment-rebill').innerText = 0 + additional; 
    } else {
    document.getElementById('payment-rebill').innerText = price + additional - fix;
    }
}

我的JSFIDDLE： http : //jsfiddle.net/aGq9q/17/

Answer 1

您在html中缺少一些結束標記。 檢查計划名稱標簽和付款期限div。 當您使用無效的HTML時，每個瀏覽器都會得到不同的結果； 這完全取決於他們的反應和解釋方式。

<h4 class="plan-info-header">Plan info</h4>
    <label class="plan-name">Plan name: </label> <!-- tag wasn't closed -->
    <select id="billing-plan" name="billing-plan" class="selectpicker">
        <option>Choose plan</option>
        <option>Basic</option>
        <option>Prime</option>
        <option>Gold</option>
    </select>

    <div class="payment-term">
        <label>Billing period:</label>
        <select id="billing-price" name="billing-term" class="selectpicker" disabled>
            <option value="0">Choose billing term</option>
        </select>
        <br>
        <label>Advertising Budget:</label>
        <input id="advertising"></input>
    </div> <!-- wasn't closed -->

    <div class="card-charge-info">
        Your card will be charged $<span id="payment-total">0</span> now, and your subscription     will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime. <!-- <span id="test">XXX</span> -->
    </div>

我在IE中進行了測試，其行為類似於Safari。 這是更新的小提琴