（转）jQuery ajax填充select的插件

yaofang123

注意：这个与jquery easyui插件有冲突，使用此插件后，easyui的datagrid中的singSelect将会失效

原址：http://blog.csdn.net/luq885/archive/2007/07/31/1719538.aspx

 

 

首先是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.htmPS: 呆会整理完这个插件的应用之后会继续发一篇使用详细说明文档！下拉列表框联动插件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“的列表项，并且是选中状态下载地址http://bbs.jquery.org.cn/viewthread.php?tid=637&extra=page%3D1或者是http://download.csdn.net/user/luq885