javascript - 使用 JavaScript 或 css 将动态下拉列表链接到另一个页面

Question

我正在为我的分支机构设计一个小型网站。用户应该在哪里选择他的年份和部门，并显示他的班级详细信息。在我的分支中，第 2 年有 4 个部分，第 3 年有 3 个部分所以如果我选择第 3 年，它应该在下拉列表中动态显示 3 个部分，并且当他选择他的部分时，它应该自动显示或转到他的班级详细信息页面所以请帮忙我要摆脱这种情况我尝试过的代码是

<script type="text/javascript">
  function populate(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if (s1.value == "16") {
      var optionarray = ["|", "5A|A", "5B|B", "5C|C"];

    } else if (s1.value == "17") {
      var optionarray = ["|", "3A|A", "3B|B", "3C|C", "4D|D"];

    }
    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>
<div class="next">
  <h2>selct your pin and section</h2>
  <select id="slct1" name="slct1" class="drop" onchange="populate('slct1','slct2')">
    <OPTION> </OPTION>
    <option value="16">16124</option>
    <option value="17">17124</option>
  </select>

  <select id="slct2" name="slct2" class="drop"> </select>

</div>

标签： javascript

Answer 1

与其对这些部分进行硬编码，不如在条件语句中更好地使用类似sectionmapping. 它易于维护和访问。我通常只是添加一个div来显示课程详细信息。您也可以使用它来重定向到新页面。

var sectionmapping = {16:["|","5A|A","5B|B","5C|C"],17:["|","3A|A","3B|B","3C|C","4D|D"]};
function populate(s1,s2)
{
    var s1=document.getElementById(s1);
    var s2=document.getElementById(s2);
    s2.innerHTML="";
    var optionarray = sectionmapping[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);
    }
}

function goToSection(elem)
{
    var details = document.getElementById("classdetails");
    details.style.display="block";
    details.innerHTML = elem.value+"Details";
}

.classdetails
{
    margin:10px;
    padding:10px;
    background : yellow;
    font-family : Lato;
}

<div class="next">
    <h2>selct your pin and section</h2>
    <select id="slct1" name="slct1" class="drop" onchange="populate('slct1','slct2')">
    <option value="16">16124</option>
    <option value="17">17124</option>
</select>

<select id="slct2" name="slct2" class="drop" onchange="goToSection(this)">
    <option value=""></option>
    <option value="5A">A</option>
    <option value="5B">B</option>
    <option value="5C">C</option>
</select>
    
</div>

<div id="classdetails" class="classdetails" style="display:none">

</div>