<%@ Page Language=
"C#"
AutoEventWireup=
"true"
CodeFile=
"ddlAjax.aspx.cs"
Inherits=
"ThreeAjaxDrop_ddlAjax"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head runat=
"server"
>
<title>DropDownList三级联动</title>
<style type=
"text/css"
>
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial @宋体;}
</style>
<script type=
"text/javascript"
src=
"../js/jquery-1.4.min.js"
></script>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$.getJSON(
"Default.aspx"
,
function
(data) {
$.each(data,
function
(index, value) {
$(
"#selProvince"
).append(
"<option value='"
+ value.value +
"'>"
+ value.text +
"</option>"
);
});
});
$(
"#selProvince"
).change(
function
(){
document.getElementById(
"selArea"
).options.length=1;
document.getElementById(
"selCity"
).options.length=1;
$.getJSON(
"HandlerDropDownAjax.ashx"
,{
"type"
:
"city"
,
"fid"
:$(
this
).val()},
function
(data){
$.each(data,
function
(index, value) {
$(
"#selCity"
).append(
"<option value='"
+ value.value +
"'>"
+ value.text +
"</option>"
);
});
});
});
$(
"#selCity"
).change(
function
(){
document.getElementById(
"selArea"
).options.length=1;
$.getJSON(
"HandlerDropDownAjax.ashx"
,{
"type"
:
"area"
,
"fid"
:$(
this
).val()},
function
(data){
$.each(data,
function
(index, value) {
$(
"#selArea"
).append(
"<option value='"
+ value.value +
"'>"
+ value.text +
"</option>"
);
});
});
});
});
</script>
</head>
<body>
<form id=
"form1"
runat=
"server"
>
<p>
三级联动:<select id=
"selProvince"
>
<option value=
"选择省份"
>==选择省份==</option>
</select> <select id=
"selCity"
><option>==选择城市==</option></select>& amp;nbsp; <select id=
"selArea"
><option>==选择县==</option></select>
</p>
</form>
</body>
</html>