Question

我需要创建3个步骤的动态选择表单：

步骤1 =>选择背景（3个选项）

步骤2 =>选择城市（基于步骤1的4个选项）

第3步=>选择课程（基于第2步最多10个选项）

步骤4 =>提交

function addOP(s1, s2, s3) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  var s3 = document.getElementById(s3);
  s2.innerHTML = "";
  if (s1.value == "corp") {
    var optionArray = ["| course", "course1|num1", "course2|num2"];
  } else if (s1.value == "pers") {
    var optionArray = ["| begginer/pro", "begginer|begg1", "pro|pro1"];
  };

  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);
  }
  s2.onchange = addOP2('slct2', 'slct3');

}

<div class="start1">

  <div class="who">
    <select id="slct1" name="slct1" onchange="addOP(this.id,'slct2','slct3')">
      <option value="">op1</option>
      <option value="corp">op2</option>
      <option value="pers">op3</option>
    </select>
  </div>

  <div class="who">
    <select id="slct2" name="slct2" onclick="addOP2()">
      <option value="" disabled selected hidden>select</option>
    </select>
  </div>

  <div class="who">
    <select id="slct3" name="slct3">
      <option value="" disabled selected hidden>select</option>
    </select>
  </div>

  <div class="who">
    <button class="button" style="vertical-align:middle"><span>lets go! </span></button>
  </div>

</div>

我能够使第2步从第1步选项动态创建，但是我无法执行第3步。我需要在javascript和jquery中做到这一点

感谢您的帮助：）

动态选择表格JS / JQ

0 个答案: