0
我想在第一個下拉菜單的基礎上填充第二個下拉選項。 假設我有1個下拉菜單選項{印度,南非,美國} 如果我選擇印度,那麼第二個下拉菜單必須顯示{拉賈斯坦邦,MP,HP,UP ...} 以及其他。jsp頁面上的多個依賴下拉菜單
這裏的值是靜態的,所以只存在於jsp上,但是在兩者的選擇上我必須在後端執行過濾條件。
我該如何使用javascript或jquery?
我想在第一個下拉菜單的基礎上填充第二個下拉選項。 假設我有1個下拉菜單選項{印度,南非,美國} 如果我選擇印度,那麼第二個下拉菜單必須顯示{拉賈斯坦邦,MP,HP,UP ...} 以及其他。jsp頁面上的多個依賴下拉菜單
這裏的值是靜態的,所以只存在於jsp上,但是在兩者的選擇上我必須在後端執行過濾條件。
我該如何使用javascript或jquery?
我想你可能想是這樣的:
var citiesByState = {
USA: ["NY", "NJ"],
Singapore: ["taas", "naas"],
India: ["Rajasthan", "MP", "HP", "UP"]
}
function makeSubmenu(value) {
if (value.length == 0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for (cityId in citiesByState[value]) {
citiesOptions += "<option>" + citiesByState[value][cityId] + "</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
<body onload="resetSelection()">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option></option>
<option>USA</option>
<option>Singapore</option>
<option>India</option>
</select>
<select id="citySelect" size="1">
<option></option>
</select>
</body>
注意:您在HTML中添加像印度必須具有相同的名稱和情況(區分大小寫)的選項在JavaScript數組中,如印度: [「拉賈斯坦邦」,「MP」,「HP」,「UP」]
謝謝@ divy3993 –
所以,如果這有助於你和你感到滿意。接受答案。 – divy3993
我想知道我們如何在jQuery中做到這一點? –