当前页面: 开发资料首页 → Javascript 专题 → 下拉框联动

下拉框联动

摘要: 下拉框联动

下拉框联动有两个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中用于比较主联动值的索引

//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 进行页面使用

<head>

无标题文档
</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>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 图片的淡入淡出(HTC)
后一篇: JS版常见问题(一)层遇到select框时?