Javascript选择框选择填充其他选择框

每当另一个选择框收到用户输入时，我需要填充一个选择框。但是，我需要为填充的每个选项指定一个值。第一个选择框强制用户选择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:

计划信息
计划名称：
选择计划
基本的
首要的
黄金
计费周期：
选择计费期限
您的卡将被收取费用$
0
现在，您的订阅将收取$
0
此后每个月。您可以随时取消或更改计划。

这里是JSFIDLE中的一个模型：

这里是更新的

更改了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]
    }
}

还添加了填充填充方法

非常简单：

使计划成为目标：

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

功能填充填充（元素、计划）{
对于（var i=0；i
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)
}