Javascript選擇框選擇填充其他選擇框

Question

每當另一個選擇框收到用戶輸入時，我需要填充選擇框。但是，我需要爲每個填充的選項分配一個值。第一個選擇框強制用戶選擇Basic，Prime或Gold。我需要在下一個選擇框來填充選擇的確切的對象：

var basic = { 
    "Option" : ["200/month for 1-yr", "250/month"], 
    "Value" : [200, 250] 
} 
var prime = { 
    "Option" : ["300/month for 1-yr", "350/month"], 
    "Value" : [300, 350] 
} 
var gold = { 
    "Option" : ["400/month for 1-yr", "450/month"], 
    "Value" : [400, 450] 
} 

我想我需要一個ID，以填充它設置爲初始選擇框的每個選項。

的Javascript：

var term = 0; 
var price = 0; 
var additional = 0; 
var select = document.getElementById('billing-price'); 
select.addEventListener('change', updatePrice, false); 
var plan = document.getElementById('billing-plan'); 
plan.addEventListener('change', enableBilling, false); 
var basic = { 
    "Option" : ["200/month for 1-yr", "250/month"], 
    "Value" : [200, 250] 
} 
var prime = { 
    "Option" : ["300/month for 1-yr", "350/month"], 
    "Value" : [300, 350] 
} 
var gold = { 
    "Option" : ["400/month for 1-yr", "450/month"], 
    "Value" : [400, 450] 
} 

function populateBilling(e) { 
//FILL BILLING PERIOD WITH PLAN OPTIONS AND VALUES 
} 

function enableBilling(e) { 
    document.getElementById("billing-price").disabled=false; 

} 

function updatePrice(e) { 
    price = parseFloat(select.value); 
    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; 
    } 
} 

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 id="basic">Basic</option> 
    <option id="prime">Prime</option> 
    <option id="gold">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> 

<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. 
</div> 

這裏是一個的jsfiddle樣機：http://jsfiddle.net/aGq9q/1/

Answer 1

下面是更新Fiddle

改變了JSON對象

var plans = { 
     basic : { 
     "Option" : ["200/month for 1-yr", "250/month"], 
     "Value" : [200, 250] 
    }, 
    prime : { 
     "Option" : ["300/month for 1-yr", "350/month"], 
     "Value" : [300, 350] 
    }, 
     gold : { 
     "Option" : ["400/month for 1-yr", "450/month"], 
     "Value" : [400, 450] 
    } 
} 

還增加了populateBilling方法

Answer 2

Updated Fiddle

很簡單：

做計劃的對象：

var plans = { 
    basic : { 
     "Option" : ["200/month for 1-yr", "250/month"], 
     "Value" : [200, 250] 
    }, 
    prime : { 
     "Option" : ["300/month for 1-yr", "350/month"], 
     "Value" : [300, 350] 
    }, 
    gold : { 
     "Option" : ["400/month for 1-yr", "450/month"], 
     "Value" : [400, 450] 
    } 
}; 

而這兩個人口：

function populateBilling(elem,plan){ 
    for (var i = 0; i<2; i++){ 
     //remove the previous option 
     elem.options[i] = null; 
     //create new option 
     var opt = document.createElement('option'); 
     opt.value = plans[plan]["Value"][i]; 
     opt.innerHTML = plans[plan]["Option"][i]; 
     //add it 
     elem.appendChild(opt); 
    } 

} 

function enableBilling(e) { 
     document.getElementById("billing-price").disabled=false;  
     var pick = e.target.options[e.target.selectedIndex].id; 
     var select = document.getElementById('billing-price'); 
     populateBilling(select,pick) 
} 

注意：您不應該在窗口中聲明這些變量（選擇和計劃）。