AjAx下拉列表框（SELECT）jquery插件

最新推荐文章于 2021-08-05 13:06:09 发布

javazhuanzai

最新推荐文章于 2021-08-05 13:06:09 发布

阅读量486

点赞数

分类专栏： javaee 文章标签： ajax jquery插件 json function url xml

javaee 专栏收录该内容

788 篇文章

订阅专栏

本文介绍了如何利用Filloptions插件通过AJAX获取数据并填充下拉列表框，CascadingSelect插件实现两个下拉列表框的联动，以及Addoption插件用于向列表框添加列表项。通过实例展示了省市区三级联动的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

======================================================
注：本文源代码点此下载
======================================================

首先是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“的列表项

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/