想當年，為了實現三級聯動，找個js高手些了N多代碼才搞定，但是很慢，因為一次要將所有的選項取來，然後排序，尋找動態顯示。
現在使用AJAX真是太方便了，下面做了個簡單例子，實現下拉框的省市聯動，效果圖如下：
實現代碼：
a.html
<html>
<body>
<script language="JavaScript">
var req = null;
function test() {
var province = document.all("province").value;
req = new ActiveXObject("Microsoft.XMLHTTP");
//設定屬性，當幕後處理完成後，回來調用myDeal方法。
req.onreadystatechange = myDeal;
//發出請求
req.open("GET", "c.jsp?province=" + province, "false");
req.send(null);
}
function myDeal() {
if (req.readyState == 4) {
//接收服務端返回的資料
var ret = req.responseText;
//處理資料
var obj = document.all("city");
for (var i = obj.options.length - 1; i >= 0; i--) {
obj.options.remove(i); //從後往前刪除
}
var ops = ret.split("|");
for (var i = 0; i < ops.length; i++) {
var op = ops[i];
var ss = op.split(",");
var oOption = document.createElement("OPTION"); //建立一個OPTION節點
obj.options.add(oOption); //將節點加入city選項中
oOption.innerText = ss[1]; //設定選擇展示的資訊
oOption.value = ss[0]; //設定選項的值
}
}
}
</script>
省份：<select id="province" name="province" onchange="test();">
<option value="hn">河南</option>
<option value="sx">陝西</option>
</select><br>
城市：<select id="city" name="city">
<option value="zz">鄭州</option>
<option value="ly">洛陽</option>
</select><br>
</body>
</html>
c.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String id = request.getParameter("province");
System.out.println("id="+id);
if(id !=null&& id.equals("hn")){
out.println("zz,鄭州市|ly,洛陽市");
}else if(id != null && id.equals("sx")){
out.println("xa,西安市|xy,鹹陽市");
}
%>
這個功能挺實用的，選項資料可以從資料庫中擷取，為了把例子做簡單點，就用jsp提供資料。
出處：http://lavasoft.blog.51cto.com/62575/204884
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
