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

Javascript
兼容firefox的文本框只能输入两位小数的数字的代码
javascript 年月日联动实现核心代码
JavaScript 图片预览效果 推荐
JavaScript是否可实现多线程 深入理解JavaScript定时机制
jquery 表单取值常用代码
javaScript 删除确认实现方法小结
javascript强制弹出新窗口实现代码
Js倒计时代码,当鼠标离开页面与回到页面会自动停止与开始
Div+Js实现的带阴影菜单 微软以前网站曾用过
纯CSS实现的当鼠标移上图片添加阴影效果代码
JavaScript 未知高度元素垂直居中实现代码
javascript 仿开心网好友印象功能(点击文字弹出印象框)
JS+CSS实现的一种交互体验 表单页面
js 效率组装字符串 StringBuffer
window.js 主要包含了页面的一些操作
关于Aptana Studio生成自动备份文件的解决办法
javascript下arguments,caller,callee,call,apply示例及理解
HTA版JSMin(省略修饰语若干)基于javascript语言编写
CSS+Jquery实现页面圆角框方法大全
js 页面刷新location.reload和location.replace的区别小结

Javascript 中的 下拉框联动


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