Ajax实现二级或者三级联动下拉框
$.ajax({ url: url + "option=dropdown",
type: "post",
data: "znstr=" + str + "&znclass="+ zclass + "",
datatype: "html",
error: function(xmlhttprequest) { },
success: function(data) {
if(data!="false")
{
if(data.tostring().length > 0)
{
cleardrop(znclass);
}
var vars = new array();
vars = data.tostring().split(',');
for(var i =0;i< (vars.length) ;i=i+2 )
{
switch(znclass)
{
case 2:
$("#citytwo").append("<option value='"+vars[i+1]+"'>"+vars[i]+"</option>");
break;
case 3:
$("#citythree").append("<option value='"+vars[i+1]+"'>"+vars[i]+"</option>");
break;
case 4:
$("#cityfour").append("<option value='"+vars[i+1]+"'>"+vars[i]+"</option>");
break;
}
}
%>
下面看个完整实例
<%@ page contenttype = "text/html; charset=gbk" import="java.util.*,com.wehave.hyerp.procurement.domain.cgsqd"%>
<%@ taglib uri="struts-html" prefix="html" %>
<%@ taglib uri="struts-logic" prefix="logic" %>
<%@ taglib uri="struts-bean" prefix="bean" %>
<html>
<head>
<title> </title>
<link rel = "stylesheet" type = "text/css教程" href = "../css/olstyle.css">
<script type="text/网页特效">
var req;
window.onload=function(){
}
function change_select()
{
var zhi=document.getelementbyid('m_gykfwzlbb_lbbm').value;
var url="sqdselect.go?method=getskill&id="+zhi;
if(zhi=="0"){
alert("请选择您要察看的信息");
return;
}else{
if(window.xmlhttprequest)
{
req=new xmlhttprequest();
}else if(window.activexobject)
{
req=new activexobject("microsoft.xmlhttp");
}
if(req)
{
req.open("get",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}
}
function change_select2()
{
var zhi=document.getelementbyid('m_lbbm_se').value;
//alert(zhi.substring(0,2));
if(zhi=="0"){
alert("请选择您要察看的信息");
return;
}
if(zhi.substring(0,2)=="wy"){
var url="sqdselect.go?method=getskill2&id="+zhi;
if(window.xmlhttprequest)
{
req=new xmlhttprequest();
}else if(window.activexobject)
{
req=new activexobject("microsoft.xmlhttp");
}
if(req)
{
req.open("get",url,true);
req.onreadystatechange=callback2;
req.send(null);
}
}else{
parent.topfram.location ="sqdselectall.go?method=getlistall&id="+zhi;
}
}
function change_select3()
{
var zhi=document.getelementbyid('m_lbbm_th').value;
//alert(zhi.substring(0,2));
if(zhi=="0"){
alert("请选择您要察看的信息");
return;
}else{
parent.topfram.location ="sqdselectall.go?method=getlistall2&id="+zhi;
}
}
function callback()
{
if(req.readystate == 4)
{
if(req.status == 200)
{
parsemessage();
}else{
alert("not able to retrieve description"+req.statustext);
}
}
}
function callback2()
{
if(req.readystate == 4)
{
if(req.status == 200)
{
parsemessage2();
}else{
alert("not able to retrieve description"+req.statustext);
}
}
}
function parsemessage()
{
var xmldoc=req.responsexml.documentelement;
var xsel=xmldoc.getelementsbytagname('select');
var select_root=document.getelementbyid('m_lbbm_se');
select_root.options.length=0;
for(var i=0;i<xsel.length;i++)
{
var xvalue=xsel[i].childnodes[0].firstchild.nodevalue;
var xtext=xsel[i].childnodes[1].firstchild.nodevalue;
var option=new option(xtext,xvalue);
try{
select_root.add(option);
}catch(e){
}
}
}
function parsemessage2()
{
var xmldoc=req.responsexml.documentelement;
var xsel=xmldoc.getelementsbytagname('select');
var select_root=document.getelementbyid('m_lbbm_th');
select_root.options.length=0;
for(var i=0;i<xsel.length;i++)
{
var xvalue=xsel[i].childnodes[0].firstchild.nodevalue;
var xtext=xsel[i].childnodes[1].firstchild.nodevalue;
var option=new option(xtext,xvalue);
try{
select_root.add(option);
}catch(e){
}
}
}
</script>
</head><body bgcolor = "#c8d0d4">
<html:form action="/cgsqdnewaction.go">
<table class = "cbtoolbar" id = "idtoolbar" cellpadding = '0' cellspacing = '0'>
<tr align = "left" valign = "top" >
<td nowrap> 物质类别:
<html:select property="m_gykfwzlbb_lbbm" onchange="change_select()">
<html:option value="0">请选择</html:option>
<html:options collection="lbflist" property="m_gykfwzlbb_lbbm" labelproperty="m_gykfwzlbb_lbmc"/>
</html:select>
<html:select property="m_lbbm_se" styleid="m_lbbm_se" onchange="change_select2()">
<html:option value="0"> </html:option>
</html:select>
<html:select property="m_lbbm_th" styleid="m_lbbm_th" onchange="change_select3()">
<html:option value="0"> </html:option>
</html:select>
</td>
</tr>
</table>
</html:form>
</body>
</html>action
public actionforward doselectwzlb(
actionmapping mapping,
actionform form,
https教程ervletrequest req,
httpservletresponse res) {
httpsession session = req.getsession();
usersession usersession =
(usersession) session.getattribute("usersession");
permission.setuserid(usersession.getuserid());
permission.setusername(usersession.getusername());
permission.setmodulename("m_cgsqd");
permission.setactionstr("'m_select'");
if(permissionservice.checkuserpermission(permission)){
int updatesign=0;
try{
cgsqdservice.updatecgsqwzhzb_sqsl();
updatesign=1;
}catch(exception e){
e.printstacktrace();
updatesign=0;
}
if(updatesign==1){
list lbflist=cgsqdservice.treelistwzlb2();
req.setattribute("lbflist",lbflist);
return mapping.findforward("tools");
}else{
return null;
}
}else{
return mapping.findforward("failure");
}
}
/** *//**
*
* 查询物质编码类别列表操作(二级)
* */
public actionforward doselectwzlb1(
actionmapping mapping,
actionform form,
httpservletrequest req,
httpservletresponse res) {
httpsession session = req.getsession();
usersession usersession =
(usersession) session.getattribute("usersession");
permission.setuserid(usersession.getuserid());
permission.setusername(usersession.getusername());
permission.setmodulename("m_cgsqd");
permission.setactionstr("'m_select'");
if(permissionservice.checkuserpermission(permission)){
int updatesign=0;
try{
cgsqdservice.updatecgsqwzhzb_sqsl();
updatesign=1;
}catch(exception e){
e.printstacktrace();
updatesign=0;
}
if(updatesign==1){
list lbflist=cgsqdservice.treelistwzlb2();
req.setattribute("lbflist",lbflist);
return mapping.findforward("tools1");
}else{
return null;
}
}else{
return mapping.findforward("failure");
}
}
/** *//**
*
* 查询物质编码类别列表操作(三级)
* */
public actionforward getskill(
actionmapping mapping,
actionform form,
httpservletrequest req,
httpservletresponse res) {
httpsession session = req.getsession();
usersession usersession =
(usersession) session.getattribute("usersession");
permission.setuserid(usersession.getuserid());
permission.setusername(usersession.getusername());
permission.setmodulename("m_cgsqd");
permission.setactionstr("'m_select'");
if(permissionservice.checkuserpermission(permission)){
string id=req.getparameter("id");
res.setcontenttype("text/xml;charset=gbk");
res.setheader("cache-control","no-cache");
string xml_start="<?xml version="1.0" encoding="gbk"?>";
xml_start+="<selects>";
string xml_end="</selects>";
string xml="<select><value>0</value><text>请选择</text></select>";
string m_lbbm_se="";
string m_lbmc_se="";
list lbflist=null;
if(id.equals("wy")){
lbflist=cgsqdservice.treelistwzlb3_2(id);
}else{
lbflist=cgsqdservice.treelistwzlb3_1(id);
}
iterator it=lbflist.iterator();
while(it.hasnext()){
cgsqd cgsqd=(cgsqd)it.next();
m_lbbm_se=cgsqd.getm_gykfwzlbb_lbbm();
m_lbmc_se=cgsqd.getm_gykfwzlbb_lbmc();
xml +="<select><value>"+m_lbbm_se+"</value><text>"+m_lbmc_se+"</text></select>";
}
string last_xml=xml_start+xml+xml_end;
logger.debug("xml是："+last_xml);
try {
res.getwriter().write(last_xml);
} catch (ioexception e) {
e.printstacktrace();
}
return null;
}else{
return null;
}
}
