动态二级下拉菜单的实现

动态二级联动下拉菜单的实现

在业务实现上，页面二级联动下拉菜单是经常遇到的需求。三级联动下拉菜单典型的实例是年月日的实现，但是这一功能目前已转向通过DatePicker插件来实现。即使业务中有三级联动下拉菜单，实现原理也和二级下拉菜单的实现方式相同。

一、需求分析

首先，动态二级联动下拉菜单的通常在页面加载前实现。基于这个原因，实现方式上通常在页面加载时，配置二级联动的规则。

其次，动态二级联动下拉菜单的选项，通常来自于后台数据库。如果仅仅是二级联动下拉菜单，那么仅仅通过javascript就可以完成。因为需要向后台请求数据，所以通过Ajax请求比较方便。

最后，在传输数据格式上，可以采用XML格式，但是如果采用JSON，则由于数据量小，数据便于解析等优点，更加方便。

二代码实现

有了以上的分析，可以着手编码实现了。

（一）在下拉框加入id属性，并删除option选项：

文件中。

（3）被Json拦截器拦截的对象是categorys，事实上是希望返回一个Map>格式，适合于二级下拉菜单。也可以将这些信息放入一个自建类。

（四）编写Action类

Map类，这里将每个String都加了双引号，原因是作为Json串，需要每个字符串类型是有双引号的（注意：单引号也不行）。而如果这里不加双引号，就需要在前端用javascript来组合。

（五）页面加载时的Javascript，采用Jquery。先是装配JSon串：

说明：这里做了两件任务，一是第一级下拉菜单内容的加载。一是将传回数据转为JSON串存入指定的div。Json串格式：{“类型1”:[“频道1”,”频道2”],”类型2”:[“频道1”,”频道2”]}。编码时要注意逗号、冒号只能是英文字符下的逗号、冒号。否则会引起不必要的调试消耗。

加载第二级下拉菜单数据。

三、可能的优化

以上代码实现通过Struts2的json拦截器，此拦截器的作用是将Server端的数据转换为JSON对象呈现在前端。事实上，也可以在Server端直接组装JSON字符串，直接存储在div 中。再通过JSON.parse()方法来读取转化为JS对象，分别分载一二级下拉菜单数据。实现时需要注意的是Struts.xml中的配置不需要拦截器，方法返回值是null。具体实现这里先略过了。

四、其它问题

（1）状态回显

当下拉菜单的选项作为搜索条件时，当Server端有返回搜索结果时，应该将搜索条件返回。为了达到这个目的，在页面增加了两个隐藏域

将返回的结果写在隐藏域中，比较清晰，也是Javascript代码与HTML代码分离的需要。（如果JS代码与HTML页面在一起，也可以直接在JS中引用。）

有了返回值，接下来就要在下拉框中显示，第一个下拉菜单要写在页面装载后的Ajax

（2）如何实现下拉菜单的placeholder？

大家知道，对于input可以使用placeholder提示输入字段的预期值。有时，下拉选择框有这种需求。比如多级下拉选择框。但是默认情况下，选择框是没有这个属性的。

要实现这个目标，首先加入以下css的class。其中颜色#A5A5A5就是placeholder的颜色:

暗色，而其它情况正常显示。