联动下拉框 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):

(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); 

posted @ 2011-06-04 16:44  曾祥展  阅读(2239)  评论(0编辑  收藏  举报