Implementation skills of three level linkage pull down menu with JSP + DWR

Time:2021-4-20

I see some examples on the Internet. For a simple three-level linkage, struts, hibernate and other frameworks are added. This Ajax linkage has nothing to do with these frameworks. Why is a small demo so big.

Today I did an example of DWR + JSP.
web.xml:

Copy codeThe code is as follows :
<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app version=”2.4″ xmlns=”http://java.sun.com/xml/ns/j2ee”
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”>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet>
<servlet-name>SelectServlet</servlet-name>
<servlet-class>com.action.SelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SelectServlet</servlet-name>
<url-pattern>/select</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

dwr.xml:

Copy codeThe code is as follows :
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE dwr PUBLIC “-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN” “http://www.getahead.ltd.uk/dwr/dwr20.dtd”>
<dwr>
<! — DWR can do nothing without it — >
<allow>
<create creator=”new” javascript=”menu“>
<param name=”class” value=”com.dao.CountryDAO” />
</create>
<! — bean to convert — >
<convert converter=”bean” match=”com.vo.Country” />
<convert converter=”bean” match=”com.vo.Province” />
<convert converter=”bean” match=”com.vo.City” />
</allow>
</dwr>

test.jsp:

Copy codeThe code is as follows:
<%@ page language=”java” import=”java.util.*,com.vo.*”
pageEncoding=”GBK”%>
<%@ taglib uri=”http://java.sun.com/jstl/core” prefix=”c”%>
<html>
<head>
< title > three level linkage of DWR
<script type=’text/javascript’
src=’/mutiplyMenu/dwr/interface/menu.js’></script>
<script type=’text/javascript’ src=’/mutiplyMenu/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/mutiplyMenu/dwr/util.js’></script>
</head>
<body>
<script type=”text/javascript”>
// Query the province or state according to the country ID
function queryProvince()
{
var countryId = $(“country”).value;
//The default is no selection
if(countryId == 0)
{
${“province”}.options.length=0;
${“city”}.options.length=0;
}
else
{
menu.queryProvinceById(countryId,provinceCallback);
}
}
//Query the callback function of the province or state according to the country ID
function provinceCallback(provinces)
{
${“province”}.options.length=0;
//Each time you get new data, clear the length of each two drop-down frames to 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);
//Create an option object based on the values of each set of value and text tags
try{
$(“province”). Add (option); / / add the option object to the second drop-down box
}catch(e){
}
}
//At the same time associated with the third level
var provinceId = ${“province”}.value;
menu.queryCityById(provinceId,cityCallback);
}
// Query City
function queryCity()
{
var provinceId = $(“province”).value;
menu.queryCityById(provinceId,cityCallback);
}
//Query City callback function
function cityCallback(citys)
{
//Each time you get new data, clear the length of every three drop-down frames by 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);
//Create an option object based on the values of each set of value and text tags
try{
$(” city “). add ( option );// Add the option object to the third drop-down box
}catch(e){
}
}
}
function change1()
{
queryProvince();
}
function change2()
{
queryCity();
}
</script>
<div align=”center”>
<h3>
<br>
</h3>
<h3>
DWR three level linkage demonstration
</h3>
<! — I’m surprised that my < C > tag can’t be used here — >
<select onchange=”change1();”>
<option selected=”selected” value=”0″>
Please select
</option>
<%
@SuppressWarnings(“unchecked”)
List list = (List) request.getAttribute(“countrys”);
for (int i = 0; i < list.size(); i++)
{
Country temp = (Country) list.get(i);
%>
<option value=”<%=temp.getId()%>”><%=temp.getCountryName()%></option>
<%
}
%>
</select>
<select onchange=”change2();”>
</select>
<select>
</select>
</div>
</body>
</html>

servlet , Dao will not post, want to know can go to download the source code

Recommended Today

Review of SQL Sever basic command

catalogue preface Installation of virtual machine Commands and operations Basic command syntax Case sensitive SQL keyword and function name Column and Index Names alias Too long to see? Space Database connection Connection of SSMS Connection of command line Database operation establish delete constraint integrity constraint Common constraints NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY DEFAULT […]