JavaScript解析Json实现动态修改多级下拉选择列表控件Select

最新推荐文章于 2026-04-26 09:06:45 发布

原创

最新推荐文章于 2026-04-26 09:06:45 发布 · 5.7k 阅读

标签

#javascript #select #json #多级下拉菜单

收录于

这篇博客介绍了如何使用JavaScript和JSON动态生成多级下拉选择列表控件。内容包括从数据库获取数据，转换成JSON字符串，然后在页面加载时生成一级菜单，并在一级、二级菜单变化时动态生成下拉选项。展示了用于生成各级菜单的JavaScript代码片段。

最终效果：

根据上级菜单所选，决定下级菜单的列表项内容:

数据源

首先读取数据库中的数据得到数据，由于数据库中的数据是分散的几个二维表格，查询出来的数据是Map键值对的List集合，不能直接拿来用，需要先进行处理：一级菜单封装为String类型菜单项的List集合，二级菜单封装为键名为一级分类项名称，键值为对应二级分类项的List集合的Map。三级菜单是同二级菜单类似的Map。

再将三个级别的菜单数据转为Json字符串，通过request对象传递给页面。
request.setAttribute("oneListJson", oneListJson);
		request.setAttribute("twoMapJson", twoMapJson);
		request.setAttribute("threeMapJson", threeMapJson);