您的位置:首页 > Web前端 > JQuery

发布自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)

2008-11-24 15:35 1251 查看
首先是ajax填充插件FillOptions,这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框,数据格式支持xml格式和json格式,插件定义如下
[align=left]FillOptions(url,options)[/align]
[align=left]参数说明[/align]
   
url:ajax请求的地址,必须
[align=left]    options包括如下参数[/align]
[align=left]datatype:ajax请求返回的数据格式,可以是”xml”或”json”,默认为”json”[/align]
   
textfield:ajax请求返回的数据中下拉列表框选项文本的字段,默认为”text”
   
valuefiled:ajax请求返回的数据中下拉列表框选项值的字段,默认为”value”
   
keepold:布尔类型,是否保留下拉列表框选项原有选项,默认为不保留
   
selected:数值型,填充选项后第几项为选中状态,默认为0
 
实例如下:
[align=left]            $("#Select1").FillOptions("handler1.ashx?type=json",{datatype:"json",textfield:"province",valuefiled:"provinceID"});[/align]
 
实例说明:
Select1是页面上一个下拉列表框,通过访问"handler1.ashx?type=json"这个地址,
返回“[{"provinceID":"110000","province":"北京市"},
{"provinceID":"120000","province":"天津市"}]”
这样格式的数据,然后通过指定的textfield和valuefiled参数,
生成下拉列表框的option并添加到Select1。更多例子可以看下载中的test.htm

[align=left]            $("#Select1").CascadingSelect([/align]
[align=left]                            $("#Select2"),[/align]
[align=left]                                  "handler1.ashx?type=json",[/align]
[align=left]                            {datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},[/align]
[align=left]                            function(){[/align]
      
                                $("#Select2").AddOption("请选择","-1",true,0);
[align=left]                                $("#Select3").html("");[/align]
              
                         $("#Select3").AddOption("无选项","-1",true,0);
[align=left]                            }[/align]
           
);

[align=left]    $("#Select2").AddOption("请选择","-1",true,0);[/align]


在FillOptions()下增加
/*解决ie浏览器的刷新 selected的不起作用 http://support.microsoft.com/kb/185123/zh-cn */
if($.browser.msie &&
selected) {
$('option[value='+selected+']',this).attr('selected',true);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息