2015-10-16 77 views
0

我想在第一个下拉菜单的基础上填充第二个下拉选项。 假设我有1个下拉菜单选项{印度,南非,美国} 如果我选择印度,那么第二个下拉菜单必须显示{拉贾斯坦邦,MP,HP,UP ...} 以及其他。jsp页面上的多个依赖下拉菜单

这里的值是静态的,所以只存在于jsp上,但是在两者的选择上我必须在后端执行过滤条件。

我该如何使用javascript或jquery?

回答

0

我想你可能想是这样的:

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”]

+0

谢谢@ divy3993 –

+0

所以,如果这有助于你和你感到满意。接受答案。 – divy3993

+0

我想知道我们如何在jQuery中做到这一点? –

相关问题