Varying a second drop-down's options based on a first selection I have some JavaScript code that allows users to select a plan which triggers the second select box to populate with options. The code works, however, it seems to be very inefficient. Any advice on improving the efficiency? 

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

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

function populateBilling(planName) {
    //RESET BILLING PERIOD OPTIONS AND TOTALS
    select.options.length = 1;
    document.getElementById('payment-total').innerText = 0 + additional;
    document.getElementById('payment-rebill').innerText = 0 + additional;
    //FILL BILLING PERIOD WITH PLAN OPTIONS AND VALUES
    if (planName == "basic") {
         for (i = 0; i &lt; basic.Option.length; i++){
             var temp = document.createElement('option');
             temp.value = basic.Value[i];
             temp.text = basic.Option[i];
             select.appendChild(temp);
         }

    } else if (planName == "prime") {
        for (i = 0; i &lt; basic.Option.length; i++){
            var temp = document.createElement('option');
            temp.value = prime.Value[i];
            temp.text = prime.Option[i];
            select.appendChild(temp);
         }
    } else {
         for (i = 0; i &lt; basic.Option.length; i++){
             var temp = document.createElement('option');
             temp.value = gold.Value[i];
             temp.text = gold.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;
      }
}


Here it is in a jsfiddle: http://jsfiddle.net/aGq9q/13/
Same advice as @jfriend00, with an addition: if the user selects the "Choose Plan" placeholder, disable the billing period selector.

function populateBilling(planName) {
    //RESET BILLING PERIOD OPTIONS
    select.options.length = 1;
    document.getElementById('payment-total').innerText = 0 + additional;
    document.getElementById('payment-rebill').innerText = 0 + additional;
    //FILL BILLING PERIOD WITH PLAN OPTIONS AND VALUES
    var selectedPlan = plans[planName];
    if (selectedPlan) {
        for (var i = 0; i &lt; selectedPlan.Option.length; i++) {
            var temp = document.createElement('option');
            temp.value = selectedPlan.Value[i];
            temp.text = selectedPlan.Option[i];
            select.appendChild(temp);
        }
    } else {
        document.getElementById('billing-price').disabled = true; // ← This
    }
}




Parsing the selection text to get a JavaScript identifier is sketchy.  I'd make the value of each option explicit.

&lt;option value="basic"&gt;Basic&lt;/option&gt;


etc.

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

}