jsp层级选择器_纯JSP+DWR实现三级联动下拉选择菜单实现技巧

网上看到一些例子，对于一个简单的三级联动，都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么关系，一个小Demo干嘛整得那么大。

今天我做了一个dwr+jsp做的例子。

web.xml:

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

dwr-invoker

org.directwebremoting.servlet.DwrServlet

debug

true

SelectServlet

com.action.SelectServlet

dwr-invoker

/dwr/*

SelectServlet

/select

index.jsp

dwr.xml:

/p>

2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

test.jsp:

pageEncoding="GBK"%>

//根据国家id查询所属省或州

function queryProvince()

{

var countryId = $("country").value;

//默认为不选择

if(countryId == 0)

{

${"province"}.options.length=0;

${"city"}.options.length=0;

}

else

{

menu.queryProvinceById(countryId,provinceCallback);

}

}

//根据国家id查询所属省或州的回调函数

function provinceCallback(provinces)

{

${"province"}.options.length=0;

//每次获得新的数据的时候先把每二个下拉框架的长度清0

for(var i=0;i< provinces.length;i ++){

var value = provinces[i].id;

var text = provinces[i].provinceName;

var option = new Option(text, value);

//根据每组value和text标记的值创建一个option对象

try{

$("province").add(option);//将option对象添加到第二个下拉框中

}catch(e){

}

}

//同时关联第三级

var provinceId = ${"province"}.value;

menu.queryCityById(provinceId,cityCallback);

}

//查询所属城市

function queryCity()

{

var provinceId = $("province").value;

menu.queryCityById(provinceId,cityCallback);

}

//查询所属城市回调函数

function cityCallback(citys)

{

//每次获得新的数据的时候先把每三个下拉框架的长度清0

${"city"}.options.length=0;

for(var i=0;i< citys.length;i ++){

var value = citys[i].id;

var text = citys[i].cityName;

var option = new Option(text, value);

//根据每组value和text标记的值创建一个option对象

try{

$("city").add(option);//将option对象添加到第三个下拉框中

}catch(e){

}

}

}

function change1()

{

queryProvince();

}

function change2()

{

queryCity();

}

servlet,dao就不帖了，想了解的可以去下载源码