jQuery级联下拉列表及json相关jar包及jquery相关插件

首先是ajax填充插件FillOptions,这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框,数据格式支持xml格式和json格式,插件定义如下
FillOptions(url,options)
参数说明
    url:ajax请求的地址,必须
    options包括如下参数
datatype:ajax请求返回的数据格式,可以是”xml”或”json”,默认为”json”
    textfield:ajax请求返回的数据中下拉列表框选项文本的字段,默认为”text”
    valuefiled:ajax请求返回的数据中下拉列表框选项值的字段,默认为”value”
    keepold:布尔类型,是否保留下拉列表框选项原有选项,默认为不保留
    selected:数值型,填充选项后第几项为选中状态,默认为0

实例如下:
            $("#Select1").FillOptions("handler1.ashx?type=json",{datatype:"json",textfield:"province",valuefiled:"provinceID"});

实例说明:

Select1是页面上一个下拉列表框,通过访问"handler1.ashx?type=json"这个地址,
返回“[{"provinceID":"110000","province":"北京市"},
{"provinceID":"120000","province":"天津市"}]”
这样格式的数据,然后通过指定的textfield和valuefiled参数,
生成下拉列表框的option并添加到Select1。更多例子可以看下载中的test.htm

下拉列表框联动插件CascadingSelect,这个插件是基于上面FillOptions插件制作的,
可以实现两个下拉列表框的联动,定义如下:
         CascadingSelect(target,url,options,endfn)
参数说明:
         target:需要联动的下拉列表框,必须
         url:ajax请求的地址,必须
         options与FillOptions的类似,增加了一个参数
         parameter:ajax请求时传回值的参数名,必须
         endfn:类型是function,完成联动后执行
实例如下:
            $("#Select1").CascadingSelect(
                            $("#Select2"),
                                  "handler1.ashx?type=json",
                            {datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},
                            function(){
                                       $("#Select2").AddOption("请选择","-1",true,0);
                                $("#Select3").html("");
                                        $("#Select3").AddOption("无选项","-1",true,0);
                            }
            );
实例说明:
Select1,Select2,Select3都是页面上的下拉列表框,通过设置parameter:”p”这个参数会生成一个
"handler1.ashx?p=xxx&type=json”这样的地址来做ajax请求,
xxx为select1所选择的值,返回后使用FillOptions来填充Select2的option。
具体实例请看test1.htm中实现的省市区的三级联动。

添加一个列表项的插件AddOption,这个比较简单,用来向下拉列表框中添加一个列表项。
定义如下:
         AddOption (text,value,selected,index)
参数说明:
         text:文本型,列表项文本
         value:文本型,列表项值
         selected:布尔型,是否选择加入的列表项
         index:数值型,加入位置

实例如下:
    $("#Select2").AddOption("请选择","-1",true,0);
实例说明:
向select2最上端插入一个文本为“请选择“,值为”-1“的列表项,并且是选中状态
下载地址
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值