联动下拉框 jquery 插件(二)

联动下拉框 jquery 插件(二)

 

<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,如需转载请自行联系原作者

上一篇:怎样选择适合的数据中心架构


下一篇:Jquery N级联动 json/xml