动态加载列表框实现级联菜单的效果

来源：互联网发布：淘宝网电脑下载安装编辑：程序博客网时间：2024/05/22 03:53

效果截图：

动态加载列表框实现级联菜单的效果 - lishirong - The CTO of LiShirong

视频效果：

当两个选择框的值均不为空的时候，向服务器发送请求，并通过document来改变显示框的内容。

静态页面：dynamicLists.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>动态清单案例</title>

var xmlHttp;

function createXMLHttpRequest(){

if(window.ActiveXObject){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}

function refreshModelList(){

var make=document.getElementById("make").value;

var modelYear=document.getElementById("modelYear").value;

if(make==""||modelYear==""){

clearModelsList();

return;

}

var url="servlet/RefreshModelListServlet?"+createQueryString(make,modelYear)+"&ts="+new Date().getTime();

createXMLHttpRequest();

xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function createQueryString(make,modelYear){

var queryString="make="+make+"&modelYear="+modelYear;

return queryString;

}

function handleStateChange(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

updateModelsList();

}

function updateModelsList(){

clearModelsList();

var models=document.getElementById("models");

var results=xmlHttp.responseXML.getElementsByTagName("model");

var option=null;

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

option=document.createElement("option");

option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));

models.appendChild(option);

}

function clearModelsList(){

var models=document.getElementById("models");

while(models.childNodes.length>0){

models.removeChild(models.childNodes[0]);

}

</script>

</head>

<h1>请选择年份和品牌</h1>

<option value="">请选择年份</option>

</select>

<option value="">请选择品牌</option>

<option value="Chevrolet">Chevrolet</option>

<option value="Dodge">Dodge</option>

<option value="Pontiac">Pontiac</option>

</select>

<span style="font-weight:bold;">Models:</span>

<br/>

</select>

</form>

</body>

</html>

处理的Servlet：RefreshModelListServlet.java

package servlet;

import java.io.*;

import java.util.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class RefreshModelListServlet extends HttpServlet{

private static List availableModels=new ArrayList();

protected void processRequest(HttpServletRequest request,HttpServletResponse response)

throws IOException,ServletException{

response.setContentType("text/html;charset=UTF-8");

int modelYear=Integer.parseInt(request.getParameter("modelYear"));

String make=request.getParameter("make");

StringBuffer results=new StringBuffer("<models>");

MakeModelYear availableModel=null;

for(Iterator it=availableModels.iterator();it.hasNext();){

availableModel=(MakeModelYear)it.next();

if(availableModel.modelYear==modelYear){

if(availableModel.make.equals(make)){

results.append("<model>");

results.append(availableModel.model);

results.append("</model>");

}

results.append("</models>");

response.setContentType("text/xml");

response.getWriter().write(results.toString());

//System.out.println(results.toString());

}

protected void doGet(HttpServletRequest request,HttpServletResponse response)

throws ServletException,IOException{

processRequest(request,response);

}

public void init() throws ServletException{

availableModels.add(new MakeModelYear(2006,"Dodge","Charger"));

availableModels.add(new MakeModelYear(2006,"Dodge","Magnum"));

availableModels.add(new MakeModelYear(2006,"Dodge","Ram"));

availableModels.add(new MakeModelYear(2006,"Dodge","Viper"));

availableModels.add(new MakeModelYear(1995,"Dodge","Charger"));

availableModels.add(new MakeModelYear(1995,"Dodge","Magnum"));

availableModels.add(new MakeModelYear(1995,"Dodge","Ram"));

availableModels.add(new MakeModelYear(1995,"Dodge","Viper"));

availableModels.add(new MakeModelYear(1985,"Dodge","Charger"));

availableModels.add(new MakeModelYear(1985,"Dodge","Magnum"));

availableModels.add(new MakeModelYear(1985,"Dodge","Ram"));

availableModels.add(new MakeModelYear(1985,"Dodge","Viper"));

availableModels.add(new MakeModelYear(1970,"Dodge","Charger"));

availableModels.add(new MakeModelYear(1970,"Dodge","Magnum"));

availableModels.add(new MakeModelYear(1970,"Dodge","Ram"));

availableModels.add(new MakeModelYear(1970,"Dodge","Viper"));

availableModels.add(new MakeModelYear(2006,"Chevrolet","Colorado"));

availableModels.add(new MakeModelYear(2006,"Chevrolet","Corvette"));

availableModels.add(new MakeModelYear(2006,"Chevrolet","Equinox"));

availableModels.add(new MakeModelYear(2006,"Chevrolet","Monte Carlo"));

availableModels.add(new MakeModelYear(1995,"Chevrolet","Beretta"));

availableModels.add(new MakeModelYear(1995,"Chevrolet","Camaro"));

availableModels.add(new MakeModelYear(1995,"Chevrolet","Cavalier"));

availableModels.add(new MakeModelYear(1995,"Chevrolet","Lumina"));

availableModels.add(new MakeModelYear(1985,"Chevrolet","Cavalier"));

availableModels.add(new MakeModelYear(1985,"Chevrolet","Lumina"));

availableModels.add(new MakeModelYear(1985,"Chevrolet","Cavalier"));

availableModels.add(new MakeModelYear(1985,"Chevrolet","Chevette"));

availableModels.add(new MakeModelYear(1970,"Chevrolet","Celebrity"));

availableModels.add(new MakeModelYear(1970,"Chevrolet","Citation II"));

availableModels.add(new MakeModelYear(1970,"Chevrolet","Bel Air"));

availableModels.add(new MakeModelYear(1970,"Chevrolet","Caprice"));

availableModels.add(new MakeModelYear(2006,"Pontiac","Firebird"));

availableModels.add(new MakeModelYear(2006,"Pontiac","6000"));

availableModels.add(new MakeModelYear(2006,"Pontiac","Fiero"));

availableModels.add(new MakeModelYear(2006,"Pontiac","Grand Prix"));

availableModels.add(new MakeModelYear(1995,"Pontiac","Parisienne"));

availableModels.add(new MakeModelYear(1995,"Pontiac","Catalina"));

availableModels.add(new MakeModelYear(1995,"Pontiac","GTO"));

availableModels.add(new MakeModelYear(1995,"Pontiac","LeMans"));

availableModels.add(new MakeModelYear(1985,"Pontiac","Tempest"));

availableModels.add(new MakeModelYear(1985,"Pontiac","G6"));

availableModels.add(new MakeModelYear(1985,"Pontiac","Grand Prix"));

availableModels.add(new MakeModelYear(1985,"Pontiac","Solstice"));

availableModels.add(new MakeModelYear(1970,"Pontiac","Vibe"));

availableModels.add(new MakeModelYear(1970,"Pontiac","Bonneville II"));

availableModels.add(new MakeModelYear(1970,"Pontiac","Grand Am"));

availableModels.add(new MakeModelYear(1970,"Pontiac","Grand Prix"));

}

private static class MakeModelYear{

private int modelYear;

private String make;

private String model;

public MakeModelYear(int modelYear,String make,String model){

this.modelYear=modelYear;

this.make=make;

this.model=model;

}

关键词：动态加载列表级联菜单 List StringBuffer

0 0