我想讓我的兩個依賴下拉串列選擇選項在客戶端提交/重繪 頁面后保持選中狀態。
1-我希望我的驗證是客戶端而不是服務器端。
2-我使用不使用HTML Select和Option Tags PhP方法的腳本將下拉值放在陣列中。
3-我目前實作了使下拉B內容依賴于用戶選擇的下拉A，所以沒有問題。
4-我只是不知道如何使用Script方法而不是在每個Option標記之后使用PhP標記（因為這樣需要大量編碼才能在理論上實作一些簡單的事情：S）。
5-我問這個問題是因為我相信如果我沒有弄錯的話，一定有辦法用腳本來做：D所以如果除了這樣寫之外別無他法，請糾正我：
<option value="test" <?php if(isset($_POST["sign-up"]) && $_POST["province"]=="test") { echo " selected"; } ?>>test</option>
目前這是我的代碼：
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>uj5u.com熱心網友回復：
您可以使用本地存盤
取消注釋下面的 localStorage 陳述句并洗掉服務器上的硬代碼
注意我使用 eventListeners 并觸發 change 事件
我還更新了您對這十年代碼的選擇加載；）
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439715.html
標籤：javascript php html jQuery