Question

我正在寻找一种简单的方法来在提交表单后保持用户选择的选项（下拉列表）。我正在使用依赖（动态）下拉菜单来缩小用户的选择范围。第二个下拉列表未显示所选选项。这是因为我认为动态生成的javascript函数。我如何让它工作？

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown(listindex)
    {
        switch (listindex)
        {
        case "manual" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("open","open");
            document.getElementById("status").options[2]=new Option("deliverd","delivered");
            break;
        case "online" :
            document.getElementById("status").options[0]=new Option("Select status","");
            document.getElementById("status").options[1]=new Option("open","open");
            document.getElementById("status").options[2]=new Option("delivered","delivered");
            document.getElementById("status").options[3]=new Option("shipped","shipped");
            break;
        }
        return true;
    }
    </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
    <form action="testdep.php" method="post">
    <div class="category_div" id="category_div">Source:
        <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
        <option id="" value="">Select source</option>
        <option id="manual" value="manual">MANUAL</option>
        <option id="online" value="online">ONLINE</option>
        </select>
    </div>
    <div class="sub_category_div" id="sub_category_div">Status:
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="status" id="status"><option value="">Select status</option></select>')
        </script>
        <noscript>
        <select id="status" name="status">
            <option id="open" value="open">OPEN</option>
            <option id="delivered" value="delivered">DELIVERED</option>
        </select>
        </noscript>
    </div>
    <input type="submit" value="send">
    </form>
    </body>
</html>

<?php
if(isset($_POST["source"])){$source=$_POST["source"]; echo $source;echo "<script>document.getElementById('".$source."').selected=true;</script>";}
if(isset($_POST["status"])){$status=$_POST["status"]; echo $status;echo "<script>document.getElementById('".$status."').selected=true;</script>";}
?>

Answer 1

这是普通的JS，使用localStorage 在form。

之后添加

并删除您发布的有关它的PHP代码。

<script language="javascript" type="text/javascript">

// On submit, store info in local storage.
document.getElementsByTagName("form")[0].addEventListener("submit",function(){
  localStorage.setItem("source",document.getElementById("source").selectedIndex);
  localStorage.setItem("status",document.getElementById("status").selectedIndex);
});

// If there is local storage on load (or return from submit), use the info.
if(localStorage.getItem("source")!="undefined"){
  document.getElementById("source").options[parseInt(localStorage.getItem("source"))].selected=true;
  document.getElementById("status").options[parseInt(localStorage.getItem("status"))].selected=true;
}
</script>

Answer 2

自己找到最终解决方案。再次感谢路易斯帮助我！

如果您有更好的解决方案，请随时发布。

<head>    
    <script type="text/javascript" src="jquery.min.js"></script>
        </head>

        <body>
        <form action="testdep2.php" method="post">
          <select id="source">
            <option disabled selected>PLAYS</option>
            <option>PLAY 1</option>
            <option>PLAY 2</option>
            <option>PLAY 3</option>
          </select>
          <br>
          <br>
          <select id="status">
            <option disabled selected>DATES</option>
          </select>
          <br>
          <br>
          <button type="submit">submit</button>
        </form>
        <script type="text/javascript">
        // Appends options to the second select, based on the first.
        $("#source").on("change",function(event){
          var x= document.getElementById("source").selectedIndex;
          switch(x)
          {
          case 1:
            $('#status') .empty();
            dynamicOption = $("<option disabled selected>").text("Choose date");
            $("#status").append(dynamicOption);
            dynamicOption = $("<option>").text("DATE 1.1");
            $("#status").append(dynamicOption);
            dynamicOption = $("<option>").text("DATE 1.2");
            $("#status").append(dynamicOption);
          break;
          case 2:
            $('#status') .empty();
            dynamicOption = $("<option disabled selected>").text("Choose date");
            $("#status").append(dynamicOption);
            dynamicOption = $("<option>").text("DATE 2.1");
            $("#status").append(dynamicOption);
            dynamicOption = $("<option>").text("DATE 2.2");
            $("#status").append(dynamicOption);
          break;
          case 3:
            $('#status') .empty();
            dynamicOption = $("<option disabled selected>").text("Choose date");
            $("#status").append(dynamicOption);
            dynamicOption = $("<option>").text("DATE 3.1");
            $("#status").append(dynamicOption);
            dynamicOption = $("<option>").text("DATE 3.2");
            $("#status").append(dynamicOption);
          break;
          }
        });

        // On submit, store info in local storage.
        document.getElementsByTagName("form")[0].addEventListener("submit",function(e){
          e.preventDefault();
          alert("Submited");
          localStorage.setItem("source",document.getElementById("source").selectedIndex);
          localStorage.setItem("status",document.getElementById("status").selectedIndex);
        });

        // If there is local storage on load (or return from submit), use the info.
        if(localStorage.getItem("source")!="undefined"){
          // Set the first select to what is in "memory".
          document.getElementById("source").options[parseInt(localStorage.getItem("source"))].selected=true;
          // Triggers the script that creates the dynamic options.
          $("#source").trigger("change");
          // Now that options are present in the second select, set it to what is in "memory".
          document.getElementById("status").options[parseInt(localStorage.getItem("status"))].selected=true;
        }
        </script>

依赖下拉：在发布后保持用户选择

2 个答案: