I want to have my two dependent dropdowns selected options to stay selected after client submit/refresh page.

1- I want my validation to be Client-side not Server-side.

2- I have my dropdown values in an array using a Script not with HTML Select and Option Tags PhP method.

3- I currently achieved making dropdown B content dependent on dropdown A selection by User so no problem with that.

4- I just don't know how to do it with the Script method instead of using PhP tags after every Option tag (because that way it took a lot of coding to achieve something simple in theory as this :S).

5- I'm asking this question because i believe there must be a way to do it with a Script if I'm not mistaking :D so please correct me if there is no other way than writing it like this:

<option value="test" <?php if(isset($_POST["sign-up"]) && $_POST["province"]=="test") { echo " selected"; } ?>>test</option>

Currently This is my Code:

var provinceObject = {
  "province1": {
    "1city1p1": [1],
    "1city2p1": [2],
    "1city3p1": [3]
  },
  "province2": {
    "2city1p2": [4],
    "2city2p2": [5],
    "2city3p2": [6]
  },
  "province3": {
    "3city1p3": [7],
    "3city2p3": [8],
    "3city3p3": [9]
  }
}

window.onload = function() {
  var provinceSel = document.getElementById("province");
  var citySel = document.getElementById("city");

  for (var x in provinceObject) {
    provinceSel.options[provinceSel.options.length] = new Option(x, x);
  }
  provinceSel.onchange = function() {
    citySel.length = 1;
    for (var y in provinceObject[this.value]) {
      citySel.options[citySel.options.length] = new Option(y, y);
    }
  }
}

<form method="post" name="SignUpForm" id="SignUpForm">

  <TABLE frame="box">
    <TR>
      <TD dir="rtl" style="text-align: center"><b>province</b></TD>
      <TD>
        <select name="province" id="province">
          <option value="1" selected>select your province</option>
        </select>
      </TD>
    </TR>
    <!--=========================================================================================-->
    <TR>
      <TD dir="rtl" style="text-align: center"><b>city</b></TD>
      <TD>
        <select name="city" id="city">
          <option value="1" selected>select your city</option>
        </select>

      </TD>
    </TR>
    <!--=========================================================================================-->
    <p>
      <INPUT style="font-weight: bold; font-size: large; background-color: mediumseagreen; 
    color: darkred" type="submit" NAME="sign-up" ID="sign-up" value="submit">

    </p>

</form>

CodePudding user response：

You can use localStorage

uncomment the localStorage statements below and remove the hardcode on your server

Note I use eventListeners and trigger the change event

I also updated your loading of the selects to code from this decade ;)

var provinceObject = {
  "province1": {
    "1city1p1": [1],
    "1city2p1": [2],
    "1city3p1": [3]
  },
  "province2": {
    "2city1p2": [4],
    "2city2p2": [5],
    "2city3p2": [6]
  },
  "province3": {
    "3city1p3": [7],
    "3city2p3": [8],
    "3city3p3": [9]
  }
}

window.addEventListener("DOMContentLoaded",function() {
  var provinceSel = document.getElementById("province");
  var citySel = document.getElementById("city");
  provinceSel.addEventListener("change",function() {
    citySel.length = 1;
    const provObj = provinceObject[this.value];
    if (!provObj) return 
    const prov = Object.keys(provObj);
    citySel.innerHTML  = prov.map(city => `<option value="${city}">${city}</option>`).join("")
    // localStorage.setItem("province",this.value)
  })
  citySel.addEventListener("change",function() {
    // localStorage.setItem("city",this.value)
  })
  
  provinceSel.innerHTML  = Object.keys(provinceObject).map(prov => `<option value="${prov}">${prov}</option>`).join("")
  const province = "province2" // localStorage.getItem("province")
  if (province) {
     provinceSel.value = province;
     provinceSel.dispatchEvent(new Event('change'))
     const city = "2city2p2" // localStorage.getItem("city")
     citySel.value = city;
  }
  
})

<form method="post" name="SignUpForm" id="SignUpForm">

  <TABLE frame="box">
    <TR>
      <TD dir="rtl" style="text-align: center"><b>province</b></TD>
      <TD>
        <select name="province" id="province">
          <option value="1" selected>select your province</option>
        </select>
      </TD>
    </TR>
    <!--=========================================================================================-->
    <TR>
      <TD dir="rtl" style="text-align: center"><b>city</b></TD>
      <TD>
        <select name="city" id="city">
          <option value="1" selected>select your city</option>
        </select>

      </TD>
    </TR>
    <!--=========================================================================================-->
    <p>
      <INPUT style="font-weight: bold; font-size: large; background-color: mediumseagreen; 
    color: darkred" type="submit" NAME="sign-up" ID="sign-up" value="submit">

    </p>

</form>