在JSP/Servlet中填充级联下拉列表

假设我有三个名为

dd1

、

dd2

和

dd3

的下拉列表控件。每个dropdownlist的值都来自数据库

dd3

的值取决于

dd2

的值，

dd2

的值取决于

dd1

的值。有人能告诉我如何调用servlet来解决这个问题吗？

您可能需要多个servlet来解决这个问题

Servlet 1：从数据库加载第一个下拉列表的值。在JSP页面上构建下拉列表。在用户选择一个值时，提交给servlet 2

Servlet 2：从第一个列表中检索值，并对第二个列表的值执行数据库搜索。构建第二个列表。当用户选择第二个值时，将其提交给servlet 3

Servlet3：检索在第二个下拉列表中选择的值，并执行数据库搜索以获取最后一个下拉列表的值

您可能想考虑Ajax来让列表填充对用户来说是无缝的。jQuery有一些非常好的插件，如果您愿意的话，可以让这变得非常简单

---

....

---

您可以编写JavaScript，在onchange事件中提交表单。同样，如果您使用像jQuery这样的现有库，它将简单10倍。

根据您的问题判断，您实际上并没有使用web框架，而是使用servlet来呈现html

我会很高兴地说，你已经落后于时代十年了：），人们使用JSP（以及类似struts的web框架）来做这类事情。然而，话虽如此，这里是：

在表单中创建一个隐藏字段，并根据要填充的下拉列表将值设置为“1”、“2”或“3”

在servlet中，捕获该值（request.getParameter（）），并将其用作“case”/if/else语句来返回适当的下拉值

---

我再说一遍，只需使用一个web框架，或者至少使用简单的旧jsp即可。实现这一点基本上有三种方法：

在第一个下拉列表的onchange事件期间将表单提交给servlet（您可以使用Javascript），让servlet获取第一个下拉列表的选定项作为请求参数，让它从数据库中获取第二个下拉列表的关联值作为

映射

，让它将它们存储在请求范围中。最后，让JSP/JSTL在第二个下拉列表中显示值。您可以为此使用（只需插入

/WEB-INF/lib

）标记。您可以在与JSP页面关联的

Servlet

的

doGet（）

方法中预填充第一个列表

${option.value}
请选择家长
${option.value}
请选择家长
${option.value}

然而，有一次需要注意的是，这将提交整个表单，并导致“内容闪现”，这可能对用户体验不利。您还需要根据请求参数以相同的形式保留其他字段。您还需要在servlet中确定请求是更新下拉列表（子下拉列表值为null）还是提交实际表单

将第二个和第三个下拉列表的所有可能值打印为Javascript对象，并在第一个下拉列表的onchange事件期间，使用Javascript函数根据第一个下拉列表的选定项填充第二个下拉列表。这里不需要表单提交，也不需要服务器周期

var dd2options=${dd2optionsAsJSObject}；
var dd3options=${dd3optionsAsJSObject}；
功能dd1更改（dd1）{
//根据选定的dd1值填写dd2选项。
所选变量=dd1。选项[dd1.selectedIndex]。值；
...
}
功能dd2更改（dd2）{
//根据选定的dd2值填写dd3选项。
var selected=dd2。选项[dd2.selectedIndex]。值；
...
}
${option.value}
请选择家长
请选择家长

然而，有一个警告是，当您拥有大量物品时，这可能会变得不必要的冗长和昂贵。假设每100个可能的项目有3个步骤，这意味着JS对象中有100*100*100=1000000个项目。HTML页面的长度将超过1MB

在Javascript中使用XMLHttpRequest在第一个下拉列表的onchange事件期间向servlet发出异步请求，让servlet获取第一个下拉列表的选定项作为请求参数，让它从数据库获取第二个下拉列表的关联值，并将其作为XML或字符串返回。最后，让Javascript通过HTMLDOM树在第二个下拉列表中显示值（如前所述，采用Ajax方式）。最好的方法是使用

因此，问题2263996
$（文档）.ready（函数（）{
$（'#dd1'）.change（function（）{fillOptions（'dd2'，this）；}）；
$（'#dd2'）.change（function（）{fillOptions（'dd3'，this）；}）；
});
函数填充选项（ddId、callingElement）{
变量dd=$（'#'+ddId）；
$.getJSON（'json/options？dd='+ddId+'&val='+$（callingElement）.val（），函数（opts）{
$（'>option'，dd）.remove（）；//首先清除旧选项。
如果（选择）{
$。每个（选项、功能（键、值）{
追加（$（''）.val（键）.text（值））；
});
}否则{
dd.append（$（''）.text（“请选择父项”）；
}
});
}
     <form action="servlet2.do">
          <select name="dd1" onchange="Your JavaScript Here">
               <option>....
          </select>
     </form>

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     String dd = request.getParameter("dd"); // ID of child DD to fill options for.
     String val = request.getParameter("val"); // Value of parent DD to find associated child DD options for.
     Map<String, String> options = optionDAO.find(dd, val);
     String json = new Gson().toJson(options);
     response.setContentType("application/json");
     response.setCharacterEncoding("UTF-8");
     response.getWriter().write(json);
 }

<script>
$(document).ready(function() 
{
    $('#dd1').change(function() { fillOptions('dd1', 'dd2'); });
    $('#dd2').change(function() { fillOptions('dd2', 'dd3'); });
});

function fillOptions(parentId, ddId) 
{
    var dd = $('#' + ddId);
    var jsonURL = 'json/options?dd=' + ddId + '&val=' + $('#' + parentId + ' :selected').val();
    $.getJSON(jsonURL, function(opts) 
    {
        $('>option', dd).remove(); // Clean old options first.
        if (opts) 
        {
            $.each(opts, function(key, value) 
            {
                dd.append($('<option/>').val(key).text(value));
            });
        } 
        else 
        {
            dd.append($('<option/>').text("Please select parent"));
        }
    });
}
</script>