<select id="Select1"></select>
<select id="Select2"></select>
<select id="Select3"></select>
<select id="Select4"> </select>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Scripts/jQuery.CascadingSelect.js" type="text/javascript" charset="gb2312"></script>
$(function() {
$("#Select1").FillOptions("Ajax/AreaHandler.ashx", {
textfield: "RegionName",
valuefiled: "RegionId"
});
$("#Select1").CascadingSelect($("#Select2"), "Ajax/AreaHandler.ashx", {
textfield: "ProvinceName",
valuefiled: "ProvinceId",
parameter: "r"
},
function() {
$("#Select2, #Select3, #Select4").empty().append('<option>--请选择--</option>').attr('disabled', 'disabled');
});
$("#Select2").CascadingSelect($("#Select3"), "Ajax/AreaHandler.ashx", {
textfield: "CityName",
valuefiled: "CityId",
parameter: "p"
},
function() {
$("#Select3,#Select4").empty().append('<option>--请选择--</option>').attr('disabled', 'disabled');
});
$("#Select3").CascadingSelect($("#Select4"), "Ajax/AreaHandler.ashx", {
textfield: "DistrictName",
valuefiled: "DistrictId",
parameter: "c"
});
json格式 同上篇
后台参数：
if (context.Request.Params["p"] != null)
{
sql = String.Format("SELECT CityId,CityName FROM T_City WHERE ProvinceId= '{0}'", context.Request.Params["p"]);
}
插件（jQuery.CascadingSelect.js）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
(
function
($) {
$.fn.FillOptions =
function
(url, options) {
options = $.extend({
textfield:
'text'
,
valuefiled:
'value'
,
selectedindexid: 0,
parameter:
''
}, options || {});
$
this
= $(
this
);
if
($
this
.children().length === 0) {
$
this
.append(
'<option>--请选择--</option>'
).attr(
'disabled'
,
'disabled'
);
}
$
this
.empty().attr(
'disabled'
,
'disabled'
)
.append(
'<option>Loading options</option>'
);
$.getJSON(url,
function
(response) {
if
(response.count > 0) {
$
this
.empty().removeAttr(
"disabled"
);
$
this
.append(
'<option>-请选择-</option>'
);
$.each(response.data,
function
(i, item) {
$
this
.append($(
"<option></option>"
)
.attr(
"value"
, eval(
"item."
+ options.valuefiled))
.text(eval(
"item."
+ options.textfield)));
});
}
else
{
$
this
.empty().prop(
"disabled"
,
true
)
.append(
'<option>No elements found</option>'
);
}
})
}
$.fn.CascadingSelect =
function
(target, url, options, endfn) {
if
(target[0].tagName !=
"SELECT"
)
throw
"target must be SELECT"
;
if
(url.length === 0)
throw
"request is required"
;
if
(options.parameter === undefined)
throw
"parameter is required"
;
$(
this
).bind(
"change"
,
function
() {
var
newurl =
""
;
urlstr = url.split(
"?"
);
newurl = urlstr[0] +
"?"
+ options.parameter +
"="
+ $(
this
).val();
target.FillOptions(newurl, options);
if
(
typeof
endfn ==
"function"
) { endfn(); }
})
}
$.fn.AddOption =
function
(text, value, selected, index) {
option =
new
Option(text, value);
this
[0].options.add(option, index);
this
[0].options[index].selected = selected;
}
})(jQuery);
|
本文转自曾祥展博客园博客，原文链接：http://www.cnblogs.com/zengxiangzhan/archive/2011/06/04/2072715.html
，如需转载请自行联系原作者
