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

相关文章
|
9月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
43 0
|
10月前
|
JavaScript
jQuery 自定义插件
jQuery 自定义插件
30 0
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
17天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
16 1
|
19天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
|
2月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
8月前
|
JavaScript
jquery实现下拉框选中对应的div
jquery实现下拉框选中对应的div
42 0
|
10月前
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
103 0
|
2月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
29 0
|
2月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
69 1