jsp页面上的多个从属下拉列表

Multiple dependent drop downs on jsp page

本文关键字：下拉列表 jsp      更新时间：2023-09-26

我想在第一个下拉选项的基础上填充第二个下拉选项。假设我有一个下拉选项{印度，南非，美国}如果我选择印度，那么第二个下拉框必须显示{拉贾斯坦邦、中央邦、HP、UP…}其他人也一样。

这里的值是静态的，因此只驻留在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中添加的选项，如India必须在JavaScript数组中有相同的名称和相同的大小写(区分大小写)，如India: ["Rajasthan"， "MP"， "HP"， "UP"]
相关文章：