二级联动之两种方法实现

 最近学习了ajax，想用ajax做出一个二级下拉联动，刚开没什么头绪，在网上也搜了一些资料，但是用处不怎么大，不过对思维的拓展还是挺有好处的， 下面我就用两种方法来显示二级下拉联动。

 

第一种：不使用ajax技术，这种方法比较复杂。

          （1）  首先将下拉列表展示出来：

            <form name="form" action="" method="post"> <table name="table" border="0"> <tr> <td> <select name="category1" οnchange="getcategory2()"> <option value="0" selected>查询一级目录</option> <% for (int i=0; i<topcategories.size(); i++) { Category c = topcategories.get(i); %> <option value="<%=c.getId() %>"><%=c.getName() %></option> <% } %> </select> </td> <td> <select name="category2" multiple> <option value="0">二级查询目录</option> </select> </td> </tr> </table> </form>

        （2）  一级目录已经展示好了， 剩下的就是展示二级目录了， 二级目录的展示要随着一级目录的变化而变化，使用javascript控制， 所以在一级目录中加一事件onchange, 当一级目录中的值改变触发该事件。

 

<script language="javascript"> <!-- function getcategory2() { } // --> </script>

 

 

（3） 怎样在javascript中根据一级目录中选中的值来动态的改变二级目录中的值，我们首先想想静态的二级联动是怎样实现的，

          <mce:script language="javascript"><!-- function getcategory2() { if (document.form.category1.selectedIndex == 1) { document.form.category1.options.length = 3; //在这里假设长为3 document.form.category1.options[0].text = ”一级查询目录" document.form.cateogry1.option[0].value = -1; //给 你个特殊值 document.form.category1.options[1].text = ”电脑"; document.form.category1.options[1].value = 1 document.form.category1.options[2].text = "手机"; document.form.category1.options[2].value = 2; } } // --></mce:script>

 

(4)   静态联动是， 是每个指定的，先判断在一级目录中选择是哪个， 然后再定义它的长度，最后挨个指定每个option中的值

 

       显然你要去除相应的数据库中的值显示到二级目录中，这种方法是不可取的，那用什么方法呢？

       在 JSP 中 定义一方法，返回的结果是以字符窜，将需要动态生成的代码都写在字符窜里。

 

 

      <%! private String getSecond(List<Category> categories, Category topcategory) { StringBuffer buf = new StringBuffer(); buf.append("if(document.form.category1.options[document.form.category1.selectedIndex].value == " + topcategory.getId() + ") { /n"); int childCount = 1; for (int i=0; i<categories.size(); i++) { Category c = categories.get(i); if (c.getPid() == topcategory.getId()) { buf.append("document.form.category2.options[" + childCount + "].text = '" + c.getName() + "';/n"); buf.append("document.form.category2.options[" + childCount + "].value = " + c.getId() + ";/n"); childCount ++; } } buf.insert(0, "document.form.category2.options.length = " + childCount + ";/n"); buf.insert(0, "document.form.category2.options[0].text = " + "'二级目录'" + ";/n"); buf.insert(0, "document.form.category2.options[0].value = -1" + ";/n"); buf.append("}/n"); return buf.toString(); } %>

 

（5） 这是需要取出所有的父类别， 每当有一个父类别就将调用一次getSecond方法

         <% List<Category> categories = Category.getCategories(); List<Category> topcategories = new ArrayList<Category>(); String str = ""; for (int i=0; i<categories.size(); i++) { Category c = categories.get(i); if (!c.isLeaf()) { str += getSecond(categories, c); } } %>

 

（6） 到了这步，所有的动态生成的javascript代码已经写在了字符串里；

         <mce:script language="javascript"><!-- function getcategory2() { <%= str %> } // --></mce:script>

 

(7) 二级联动已经完成了 OK！