<%@ page language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Inserttitle here</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
functionshowDev(){
var pro = $("#provin").val();
alert(pro);
var cc = document.getElementById("city");
var city ;
var city1 = ["长沙","张家界","岳阳"];
var city2 = ["朝阳","海淀"];
var city3 = ["广州","深圳"];
var city4 = ["黄冈","武汉"];
switch(parseInt(pro)){
case 1:city=city1;break;
case 2:city=city2;break;
case 3:city=city3;break;
case 4:city=city4;break;
}
clearOptions(cc);
for(vari=0;i<city.length;i++){
var opt= document.createElement("option");
opt.text = city[i];
opt.value = i;
cc.options.add(opt);
}
}
functionclearCity(citysi){
for(vari=citysi.length;i>-1;i--){
citysi.options.remove(i);
}
}
functionclearOptions(selected)
{
alert("进入清理杂项");
for( vari=selected.options.length;i>-1;i--)
{
selected.options.remove(i);
}
}
</script>
<body>
<h3>Ajax级联实例</h3>
省份:<select id="provin" onchange="showDev();">
<option value="1">湖南</option>
<option value="2">北京</option>
<option value="3">广东</option>
<option value="4">湖北</option>
</select>
市:<select id="city">
<option value="0">武汉</option>
</select>
</body>