怎样实现二级联动急在线等

时间:2008-06-06 08:45:27   来源:论坛整理  作者:  编辑:chinaitzhe
我有两个表 表1 city 列值为 cityId cityName
表2 area 列值为 areaId areaName cityName
在前台的页面中 我想在搜索的时候 当点击城市菜单中的一项时 另一个框中显示的是属于这个城市的所有地区
怎么实现，具体代码？急！！
网友回复:建立一对多关系 就是在表二用外键to_cityid指向表一的主键cityid
查询时可以联合查询
网友回复:ajax
网友回复:楼主用ajax实现就可以了，假如上网搜不到，再来这回帖
网友回复:去google搜索下吧，现成的很多，可以给你提供个思路
假如不用ajax,那么可以单一的用javascript来实现。
页面初始化的时候把信息放在HashMap中，城市信息作为key，value里面存一个list，list中存储对应城市信息的地区信息
页面初始化的时候首先把城市信息这个下拉框赋值，然后onclick事件中调用一个javascript方法，在这个方法中根据你选择的当前下拉框的内容去HashMap中查询处来一个List这个List当然就是对应的地区信息列表，然后用这个列表去初始化另一个下拉框
网友回复:也同意楼上的观点，但是数据量比较大的时候建议用ajax
假如数据量不大，用楼上的方法更好些
网友回复:给你个范例吧：

下拉框联动有两个java类，两个jsp页面，和一个js组成。

MultiSelect.java
该类用于生成实现联动需要的Array数组
Java code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



package select;



import java.util.*;

import java.sql.*;

import java.io.*;



public class MultiSelect {



    /**

     *产生JavaScript中用于联动的array代码

     *以省市为例

     *一般为了javascript程序的方便,建议输出格式为:

     *subcat1[subcat1.length] = new Array("江阴","12.10","12");

     *其中"江阴"的值为"12.10","12"对应江苏省,越大的范围的值越往后

     *subcat1[subcat1.length] = new Array("常州","12.11","12");

     **/

    public static String getArray(String name, String sql) throws java.sql.SQLException {

        Connection conn=null;

        try {

            Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");

            conn = 



DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=test", 



"test", "test");

        } catch (java.lang.ClassNotFoundException e) {

            System.err.print("ClassNotFoundException: "   e.getMessage());

        }

        Statement stmt = conn.createStatement();

        ResultSet rs=stmt.executeQuery(sql);

        StringBuffer sb = new StringBuffer();



        while(rs.next()){

            sb.append(name   "["   name   ".length] = new Array("   



getString(rs.getString(0),rs.getString(1),rs.getString(2))   ");\n");

        }



        return sb.toString();



    }



    private static String getString(String s1,String s2,String s3) {



        String temp = "\""   s1   "\",\"" s2 "\",\"" s3 "\"";

        return temp;

    }

}


SelectJS 该类主要是用来生成sql语句。
Java code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



package select;



public class SelectJS {



    /**

     * 写出sql，调用

     * @param name 数组名称

     * @return

     * @throws java.sql.SQLException

     */

    public static String getProducts(String name) throws java.sql.SQLException {

        return MultiSelect.getArray(name,

                                    "select describe,code,fcode from testone "

                                    );

    }



}


citys.jsp主要是用来得到Array数组
HTML code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



<%@ page contentType="text/html;charset=GB2312" %>

<%@ page import="select.*"%>





var citys = new Array();

<%=SelectJs.getDealerCity("citys")%>


select.js 主要是用来显示下拉框中的数据
JScript code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



function clearselect(Aa){



    clearList(Aa);



    Aa.options[Aa.length] = new Option("没有回答", "");



} 

//use "" to clear all:(值的索引为1)



//Aa为被联动的select,



//locationid为主联动值,



//arr为用于生成的Array,



//index1为Array中用于比较主联动值的索引



function changelocation1(Aa,locationid,arr,index1){

    clearselect(Aa);

    var i;

    for (i=0;i < arr.length; i  ){

  if (arr[i][index1] == locationid ){ 

   Aa.options[Aa.length] = new Option(arr[i][0], arr[i][1]);

  } 

 }

} 

 



//from chinaquest



function clearList(ctrl){



 if (document.all) {



  for(;ctrl.options.length>0;)



   ctrl.options.remove(ctrl.options.length-1);



 }else{



  for(;ctrl.options.length>0;)



   ctrl.options[ctrl.options.length-1] = null;



 }

}


selecttest.jsp 进行页面使用
HTML code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<script language="JavaScript" src="citys.jsp"></script>

<script language="JavaScript" src="select.js"></script>

<body>

<form method="post">

 <select name="sel_brand" 



onchange="changelocation1(this.form.elements['sel_city'],this.value,citys,2);">

 <%

 String sql="select code,Describe from testone ";

 ResultSet rs=stmt.executeQuery(sql);

 while(rs.next()) {

 %>

     <option value="<%=rs.getString(0)%>"><%=rs.getString(1)%></option>

 <% } %>

    </select>

 <select name="sel_city">

 <option value="">没有回答</option>

 </select>

</form>

</body>

</html>

网友回复: 顶楼上，学习一下
网友回复:6楼的，顶一下
网友回复:我也是这个问题，，不过还是没看太懂，就用javascrip在jsp页面里应该如何实现啊，，，主要需要注重什么啊，
网友回复:还是用ajax吧
关键字：实现,二级,联动,

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面

最新信息

最新代码下载