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

注意：您不应在窗口中声明这些变量（选择和计划）。

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

2 个答案: