有两个下拉式列表框（<Select>)分别是A与B
现在A为大类列表，B为小类列表
要求，当选取下拉式列表框A（大类列表）不同的值时，下拉式列表框B会自动获取与A对应的小类列表请问用JSP，或JSP+JavaScript该如何编写？
现在A为大类列表，B为小类列表
要求，当选取下拉式列表框A（大类列表）不同的值时，下拉式列表框B会自动获取与A对应的小类列表请问用JSP，或JSP+JavaScript该如何编写？
用AJAX，具体的可以baidu一下
运用ajax技术。
当他的值发生改变（onchang）事件的时候去调用ajax函数，
ajax懂不懂？
这个是City.jsp的代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script type="text/javascript">
<!--
//定义一个ajax对象
var http_requst;
//触发事件
function sendRequst()
{
var sheng=document.body.all.sheng.value;
//window.alert(name);
//创建ajax引擎，ajax根据用户使用的浏览器不同，会创建不同的ajax引擎
if(window.ActiveXObject)
{
//说明用户是IE浏览器
http_requst=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
http_requst=new XMLHttpRequst();
//window.alert("no ie");
}
//如果ajax引擎OK
if(http_requst)
{
//window.alert("ajax创建成功");
//请求以个servelt验证
}
var url="CityCl?city="+sheng;
//打开一个Url，准备发送，true表示同步处理
http_requst.open("GET",url,true);
//指定一个函数[回调函数]，处理从服务器返回的结果
http_requst.onreadystatechange=chuli;
//发送请求
http_requst.send();
} //处理函数
function chuli()
{
if (http_requst.readyState == 4)
{ // 判断对象状态
if (http_requst.status == 200)
{ // 信息已经成功返回，开始处理信息
//根据后台返回的数据，取出数据
var cities=http_requst.responseXML.getElementsByTagName("shi");
//获得需要变动参数的下拉列表
var mycicy=document.body.all.shi;
mycicy.length=0;//清空下拉列表的长度
for(var i=0;i<cities.length;i++)
{
//将后台得到的数据放入Option控件当中
mycicy.options[i]=new Option(cities[i].firstChild.data,cities[i].firstChild.data);
}
}
else
{ //页面不正常
alert("您所请求的页面有异常。");
}
}
}-->
</script>
<body>
<select id="sheng" onchange="sendRequst();">
<option>--省--</option>
<option value="1">山西</option>
<option value="2">东北</option>
</select>
<select id="shi">
<option>--市--</option>
</select>
</body>
</html>
这个是CityCl.java的代码
package com.city;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class CityCl extends HttpServlet { /**
* Constructor of the object.
*/
public CityCl() {
super();
} /**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
} /**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/xml");
//返回编码方式
response.setCharacterEncoding("utf-8");
//不要缓存马上返回
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
//接受ajax传来的值
String city=request.getParameter("city");
//后台根据传来的参数做处理
String rest="";
if("1".equals(city))
{
rest="<states>" +
"<shi>太原</shi>" +
"<shi>大同</shi>"+
"<shi>阳泉</shi>"+
"<shi>运城</shi>"+
"</states>";
}
else if("2".equals(city))
{
rest="<states>" +
"<shi>大连</shi>" +
"<shi>铁岭</shi>"+
"<shi>辽宁</shi>"+
"</states>";
}
//把服务器处理的结果返回给ajax引擎
out.write(rest);
out.close();//关闭流
} /**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doGet(request, response);
} /**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}}
<select name="bigtype" onchange="changeType();" value="">
<option name="aa" selected>音乐</>
<option name="bb">文学</>
<option name="cc">体育</>
</select> <select name="smalltype" value="">
<option name="a1" selected>流行音乐</>
<option name="a2">民族音乐</>
</select>
</body>
</html>
<script>
function changeType(){
var b_option =document.getElementById("bigtype").options;
for (var i=0;i<b_option.length;i++ )
{
if(b_option[i].selected){
if(b_option[i].innerText=="音乐"){
var smalltype =document.getElementById("smalltype");
for (var j=smalltype.length-1;j>-1;j--)
{
smalltype.remove(j);
}
var option1=document.createElement("option");
var option2=document.createElement("option");
option1.innerHTML="流行音乐";
option1.name="a1";
option1.name="a2";
option2.innerHTML="民族音乐";
smalltype.appendChild(option1);
smalltype.appendChild(option2);
} if(b_option[i].innerText=="文学"){
var smalltype =document.getElementById("smalltype");
for (var j=smalltype.length-1;j>-1;j--)
{
smalltype.remove(j);
}
var option1=document.createElement("option");
var option2=document.createElement("option");
option1.innerHTML="小说";
option1.name="a1";
option1.name="a2";
option2.innerHTML="诗歌";
smalltype.appendChild(option1);
smalltype.appendChild(option2);
}
if(b_option[i].innerText=="体育"){
var smalltype =document.getElementById("smalltype");
for (var j=smalltype.length-1;j>-1;j--)
{
smalltype.remove(j);
}
var option1=document.createElement("option");
var option2=document.createElement("option");
option1.innerHTML="足球";
option1.name="a1";
option1.name="a2";
option2.innerHTML="篮球";
smalltype.appendChild(option1);
smalltype.appendChild(option2);
}
}
}
}
</script>麻烦看看能不能解决你的问题。
至于你是调用下SQL海事怎么样！掉就行了！
我当时在做实验！就写死了！