当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 下拉框联动

Javascript
javascript:以前写的xmlhttp池,代码
javascript firefox兼容ie的dom方法脚本
常用的javascript function代码
javascript Discuz代码中的msn聊天小功能
js 简单类代码
分离式javascript取当前element值的代码
javascript document.images实例
javascript 调用其他页面的js函数或变量的脚本
javascript一点特殊用法
js中cookie的使用详细分析
javascript实现通过拼音首字母快速选择下拉列表
javascript解析xml字符串的函数
用javascript和css模拟select的脚本
javascript操作select参考代码
javascript String 的扩展方法集合
javascript数组的扩展实现代码集合
宝儿的zQuery库选择器简单原型
超级经典一套鼠标控制左右滚动图片带自动翻滚
javascript关键字加亮加连接
JavaScript 应用类库代码

Javascript 中的 下拉框联动


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 379 ::
收藏到网摘: n/a

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

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

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语句。
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数组

<%@ page contentType="text/html;charset=GB2312" %>
<%@ page import="select.*"%>


var citys = new Array();
<%=SelectJs.getDealerCity("citys")%>

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

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>
<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>