Dynamically fill select field in html and javascript

Question

I am building a form that should advise a user to choose for a certain plan based on the first choice it makes. I've got this code from a youtube tutorial and edited a little bit but it won't work anymore. The main problem is that the second select dropdown field won't be filled in after one selects an option in the first field.

<html>
<head>
<script>
function populate(s1,s2){
   var s1 = document.getElementById(s1);
   var s2 = document.getElementById(s2);
   s2.innerHTML = "";
   if(s1.value == "daily"){
      var optionArray = ["plan1|Plan 1","plan2|Plan 2","plan3|Plan 3"];
   } else if(s1.value == "weekly"){
      var optionArray = ["plan2|Plan 2","plan1|Plan 1","plan3|Plan 3"];
   } else if(s1.value == "biweekly"){
      var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
   } else if(s1.value == "monthly"){
      var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];

   for(var option in optionArray){
      var pair = optionArray[option].split("|");
      var newOption = document.createElement("option");
      newOption.value = pair[0];
      newOption.innerHTML = pair[1];
      s2.options.add(newOption);
   }
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Frequency of playing
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
  <option value=""></option>
  <option value="daily">Daily</option>
  <option value="weekly">Weekly</option>
  <option value="biweekly">Bi-Weekly</option>
  <option value="monthly">Monthly</option>
</select>
<hr />
We have determined a plan for you that will suit you best, feel free to select another plan:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>

JavaScript · Accepted Answer · 2015-07-08 12:48:29Z

Why does it not work?

You are missing a closure

} else if(s1.value == "monthly"){
    var optionArray = ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"];
} //Missing closure

Suggestion

You could omit all the if statements if you stored the values more logically.

Example

<script>
    mValues = {
        "daily": ["plan1|Plan 1","plan2|Plan 2","plan3|Plan 3"],
        "weekly": ["plan2|Plan 2","plan1|Plan 1","plan3|Plan 3"],
        "biweekly" : ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"],
        "monthly": ["plan3|Plan 3", "plan2|Plan 2", "plan1|Plan 1"]
    }

    function populate(s1,s2){
        var s1 = document.getElementById(s1);
        var s2 = document.getElementById(s2);

        s2.innerHTML = "";
        var optionArray = mValues[s1.value];

        for(var option in optionArray){
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
    }
</script>

learner · Accepted Answer · 2015-07-08 17:09:31Z

i wrote in different way but the result is same. check below and run code snippet.

$(document).ready(function(){

//let's create arrays
var daily = [
    {display: "Plan 1", value: "plan1" },
    {display: "Plan 2", value: "plan2" },
    {display: "Plan 3", value: "plan3" }];
    
var weekly = [
    {display: "Plan 2", value: "plan2" },
    {display: "Plan 1", value: "plan1" },
    {display: "Plan 3", value: "plan3" }];
    
var biweekly = [
    {display: "Plan 3", value: "plan3" },
    {display: "Plan 2", value: "plan2" },
    {display: "Plan 1", value: "plan1" }];
    
var monthly = [
    {display: "Plan 3", value: "plan3" },
    {display: "Plan 2", value: "plan2" },
    {display: "Plan 1", value: "plan1" }];

//If parent option is changed
$("#s1").change(function() {
        var parent = $(this).val(); //get option value from parent
       
        switch(parent){ //using switch compare selected option and populate child
              case 'daily':
                list(daily);
                break;
              case 'weekly':
                list(weekly);
                break;             
              case 'biweekly':
                list(biweekly);
                break;
              case 'monthly':
                list(monthly);
                break;
            default: //default child option is blank
                $("#child_selection").html('');  
                break;
           }
});

//function to populate child select box
function list(array_list)
{
    $("#s2").html(""); //reset child options
    $(array_list).each(function (i) { //populate child options
        $("#s2").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
    });
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Choose Your Car</h2>
<hr />
Frequency of playing
<select id="s1" name="s1" >
    <option value=""></option>
    <option value="daily">Daily</option>
    <option value="weekly">Weekly</option>
    <option value="biweekly">Bi-Weekly</option>
    <option value="monthly">Monthly</option>
</select>
<hr />
We have determined a plan for you that will suit you best, feel free to select another plan:
<select id="s2" name="s2"></select>
<hr />

Unfortunately, the first sentence appears a bit incorrect. The selector is totally fine since s1 is just a parameter holding this.id = 'slct1'.
thanks, i will update. i just focused here, var s1 = document.getElementById(s1); i didnt look at parameter

Collectives™ on Stack Overflow

Dynamically fill select field in html and javascript

2 Answers 2

Why does it not work?

Suggestion

Example

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Why does it not work?

Suggestion

Example

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related