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

Javascript
JavaScript窗口功能指南之检查一个窗口是否存在
用JAVASCIRPT写的一个动态显示日期的函数!
JavaScript窗口功能指南之打开一个新窗口
JavaScript窗口功能指南之在窗口中书写内容
JavaScript窗口功能指南之引用已打开的窗口
JavaScript窗口功能指南之发挥窗口特征
JavaScript窗口功能指南之命名窗口和框架
JavaScript窗口功能指南之创建对话框
对连串英文自动换行的解决方法 IE5.5 无忧脚本
javascript扫雷游戏,版本二
window.external的使用
JavaScript 是什麽?
SelectBox in Frame
24点终结者(javascript)
用Javascript转换源代码
JS特效之状态栏冒泡
JavaScript:实现滚动带链接的字幕
jscript错误代码及相应解释大全
实现随鼠标飘浮移动文字的JavaScript
怎样捕捉 Delete 键

Javascript 中的 下拉框联动


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 57 ::
收藏到网摘: 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>