当前位置: 编程技术>java/j2ee
纯JSP+DWR实现三级联动下拉选择菜单实现技巧
来源: 互联网 发布时间:2014-10-18
本文导语: 网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大。 今天我做了一个dwr+jsp做的例子。 web.xml: 代码如下: dwr-invoker...
网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大。
今天我做了一个dwr+jsp做的例子。
web.xml:
dwr-invoker
org.directwebremoting.servlet.DwrServlet
debug
true
SelectServlet
com.action.SelectServlet
dwr-invoker
/dwr/*
SelectServlet
/select
index.jsp
dwr.xml:
test.jsp:
DWR三级联动
//根据国家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();
}
DWR三级联动演示
请选择
servlet,dao就不帖了,想了解的可以去下载源码
今天我做了一个dwr+jsp做的例子。
web.xml:
代码如下:
dwr-invoker
org.directwebremoting.servlet.DwrServlet
debug
true
SelectServlet
com.action.SelectServlet
dwr-invoker
/dwr/*
SelectServlet
/select
index.jsp
dwr.xml:
代码如下:
test.jsp:
代码如下:
DWR三级联动
//根据国家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();
}
DWR三级联动演示
请选择
servlet,dao就不帖了,想了解的可以去下载源码