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 😀 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>
Advertisement
Answer
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>