动态填充html和javascript中的选择字段

时间：2015-07-08 12:32:46

标签： javascript jquery html html5 forms

我正在构建一个表单，建议用户根据它做出的第一个选择来选择某个计划。我从youtube教程获得了这段代码并进行了一些编辑，但它不再适用了。主要问题是，在第一个字段中选择一个选项后，第二个选择下拉字段将不会被填充。

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

2 个答案:

答案 0 :(得分：2)

为什么不起作用？

你错过了一个闭包

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

建议

如果您更逻辑地存储值，则可以省略所有if语句。

实施例

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

答案 1 :(得分：0)

我用不同的方式写，但结果是一样的。检查下面并运行代码段。

$(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 />