ajax 两级联动下拉列表 和 显示相应数据

try{
while(category.next()){
%>
<option value="<%=category.getString(1) %>" ><%=category.getString(3) %> </option>
<%}}catch (SQLException e) {
if(resultDoms.length>0){
for(var i=0;i<resultDoms.length;i++)
{
option = document.createElement("option");
results=resultDoms[i].getElementsByTagName("kindid");
}
function handleStateChangeKind(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
updateList("kind");
}else {
alert("Not able to retrieve description : " +xmlHttp.status+" -- "+ xmlHttp.statusText);
var optionValue = selectList.options[selectList.selectedIndex].value;
var url="AjaxLists?"+ createQueryString("category" ,optionValue);
createXMLHttpRequest();
e.printStackTrace();
}finally{
data.close();
} %>
</select>
&nbsp;&nbsp;&nbsp;
书籍小类：
<select id="kind" onchange="bookList()">
<option value="0">ALL </option>
//alert(xmlDoc);
models.innerHTML= xmlDoc;
}
function clearElements(id){
var models= document.getElementById(id);
while(models.childNodes.length>0){
models.appendChild(option);
}
}
}
function updateBook(id){
var models= document.getElementById(id);
var xmlDoc= xmlHttp.responseText;
xmlHttp.send(null);
}
function createQueryString(option ,optionValue){
var str="option="+option + "&optionValue="+optionValue;
return str;
本人实现了 ajax 异步实现 两级联动 的下拉列表 和 分类显示数据：
应该算是充分的实现例子， 包含了 JS + CSS 的简单设计
显示： 显示书籍大类 ----> 无刷新的显示相对应的书籍小类 ；
选择 书籍小类时候，自动显示相应的 书籍信息！
// 给Dao中查询一个标记
option.appendChild(document.createTextNode("all"));
model
// alert(models.options[0].value);
/*
}
}else{
document.getElementById("books").innerHTML="<font color='red'> Loading..... </font>";
}
}
function refreshList(){
var selectList = document.getElementById("category");
models.removeChild(models.childNodes[0]);
}
}
</script>
<style type="text/css">
table{
width: 500px;
text-align: center;
font: bold fantasy 25px;
option.setAttribute("value", results[0].firstChild.data);
results=resultDoms[i].getElementsByTagName("kindname");
option.appendChild(document.createTextNode(results[0].firstChild.nodeValue));
var url="AjaxLists?"+ createQueryString("kind" ,optionValue);
createXMLHttpRequest();
xmlHttp.onreadystatechange= handleStateChangeBook;
xmlHttp.open("GET", url, true);
createXMLHttpRequest();
var url="AjaxLists?";
xmlHttp.onreadystatechange= handleStateChangeKind;
url=url+createQueryString("category","1");
xmlHttp.open("GET", url, true);
// alert(xmlHttp.responseText);
clearElements(id);
var option= null;
option = document.createElement("option");
option.setAttribute("value", "0"+resultDoms[0].getElementsByTagName("kindid")[0].firstChild.data);
-->
<script type="text/javascript">
var xmlHttp;
window.onload=displayAll;
// 创建XMLHttpRequest对象
function createXMLHttpRequest(){
if (window.XMLHttpRequest)
自己试试吧，试试才知道，很好用的
纯手写的实例，仅供学习探究！
Jsp页面：
<%@ page language="java" import="java.util.*,com.AjaxDemo.optionLists.Dao,java.sql.*;"
contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
}
td{
height:35px;
width: 95px;
border-bottom-width:1px;
border-bottom-color: orange;
border-bottom-style: solid;
}
</style>
</head>
xmlHttp.send(null);
}
function bookList(){
var selectList = document.getElementById("kind");
var optionValue = selectList.options[selectList.selectedIndex].value;
}
}
}
function handleStateChangeBook(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
updateBook("books");
}else {
alert("Not able to retrieve description : " +xmlHttp.status+" -- "+ xmlHttp.statusText);