最近做个自助建站系统，设计到一个联动的选择框.(也就是一个大类栏目里面有很多小
栏目,当选择大类栏目的时候,小类列表框要出现相对该大类的所有小类,就象城市和省份
一样 )。
我写了个domo测试了一下。。就不知道这样效率怎么样。那位有好的办法。。别忘通知
一声。
我是这样做的。先建二张表
我用的是MYSQL
CREATE TABLE `t_bigclass` (
`b_id` int(11) NOT NULL auto_increment,
`b_name` varchar(50) default NULL,
PRIMARY KEY (`b_id`)
)
INSERT INTO `t_bigclass` VALUES (1,'大类1');
INSERT INTO `t_bigclass` VALUES (2,'大类2');
INSERT INTO `t_bigclass` VALUES (3,'大类3');
INSERT INTO `t_bigclass` VALUES (4,'大类4');
INSERT INTO `t_bigclass` VALUES (5,'大类5');
CREATE TABLE `t_smallclass` (
`s_id` int(11) NOT NULL auto_increment,
`b_id` int(11) default NULL,
`s_name` varchar(50) default NULL,
PRIMARY KEY (`s_id`)
)
插入相应的数据。。。
建个操作数据库的类。。这个类还是有很多问题的。。不管那里多。运行出来再说。
package
dyoptions.dal;
import
java.sql.
*
;
import
java.io.UnsupportedEncodingException;
public
class
dbobject
{
private
Connection conn
=
null
;
private
ResultSet rs
=
null
;
private
Statement stmt
=
null
;
private
String url;
private
String uid;
private
String pwd;
private
String jdbc;
private
boolean
bflag
=
false
;
public
dbobject()
{
}
public
Connection getSession()
throws
SQLException, ClassNotFoundException,
IllegalAccessException, InstantiationException
{
url
=
"
jdbc:mysql://localhost:3306/cms
"
;
uid
=
"
root
"
;
pwd
=
"
wujun
"
;
jdbc
=
"
org.gjt.mm.mysql.Driver
"
;
Class.forName(jdbc).newInstance();
conn
=
java.sql.DriverManager.getConnection(url,uid,pwd);
return
conn;
}
public
String execSql(
int
bigid)
throws
InstantiationException,
IllegalAccessException, ClassNotFoundException, SQLException,
UnsupportedEncodingException
{
this
.getSession();
System.out.print(
"
bigid==
"
+
bigid);
String strsql
=
"
select * from t_smallclass where b_id=?
"
;
PreparedStatement ps
=
conn.prepareStatement(strsql);
ps.setInt(
1
,bigid);
rs
=
ps.executeQuery();
System.out.print(
"
rowwwww
"
+
rs.getRow());
java.lang.StringBuffer sb
=
new
StringBuffer(
"
<test>
"
);
while
(rs.next())
{
System.out.print(rs.getInt(
1
));
//
String temp=new String(rs.getString(4).getBytes("ISO-8859-1"),"gb2312");
sb.append(
"
<id>
"
+
rs.getInt(
1
)
+
"
</id>
"
);
sb.append(
"
<small>
"
+
rs.getString(
4
)
+
"
</small>
"
);
//
System.out.print(rs.getString(2));
//
System.out.print(rs.getString(3));
}
sb.append(
"
</test>
"
);
System.out.print(sb.toString());
ps.close();
rs.close();
conn.close();
return
sb.toString();
}
}
再来一个 servlet,doget方法代码
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException
{
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache");
int bigid=Integer.parseInt(request.getParameter("bigid"));
dbobject dd=new dbobject();
String str = null;
try {
str = dd.execSql(bigid);
} catch (SQLException ex) {
} catch (ClassNotFoundException ex) {
} catch (IllegalAccessException ex) {
} catch (InstantiationException ex) {
}
PrintWriter out=response.getWriter();
out.write(str.toString());
out.close();
//out.print(str);
} 建个jsp看看。。
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
jsp1
</title>
<script type="text/javascript">
function getResult(stateVal) {
var url ="servlet1?bigid="+stateVal;
if (window.XMLHttpRequest) { //Mozilla 浏览器
req = new XMLHttpRequest();
}else if (window.ActiveXObject) { // IE浏览器
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){ // 没有异常，继续执行
req.onreadystatechange = processRequest;
req.open("GET",url, true);
req.send(null);
} else
alert("err");
}
// 处理返回信息的函数
function processRequest(){
if (req.readyState == 4) { // 判断对象状态
if (req.status == 200) { // 信息已经成功返回，开始处理信息
//alert(req.responseText);
// alert(req.responseXML.getElementsByTagName("small"));
var city = req.responseXML.getElementsByTagName("small");
var smallid=req.responseXML.getElementsByTagName("id");
alert(smallid.length);
var str=new Array();
var smid=new Array();
for(var i=0;i<city.length;i++){
str[i]=city[i].firstChild.data;
smid[i]=smallid[i].firstChild.data;
}
//alert(document.getElementById("city"));
buildSelect(str,document.getElementById("small"),smid);
}
}
}
function buildSelect(str,sel,smid) {
sel.options.length=0;
for(var i=0;i<str.length;i++) {
sel.options[sel.options.length]=new Option(str[i],smid[i])
}
}
function showid()
{
if(document.getElementById("city").value=="")
{
alert("null");
}
else
alert(document.getElementById("city").value);
}
</script>
</head>
<body bgcolor="#ffffff">
<h1>
JBuilder Generated JSP
</h1>
<select name="state" onChange="getResult(this.value)">
<option value="2">大类2</option>>
<option value="3">大类3</option>>
<option value="4">大类4</option>>
<option value="5">大类5</option>>
<option value="1">大类1</option>>
<option value="11">大类100</option>>
</select>
<select id="city">
<option value="">smallclass</option>
</select>
<input type="button" onclick="showid()" value="查看小类的结果"/>
</body>
</html>
OK...
还在改。。先把他记下来。。