http://nrbk-live-cn.iteye.com/blog/277589
这个是我用的比较多的因为,要考虑到下拉联动,而且还要和后台数据连动。
大家一看到ajax就开始怕,其实不用怕,这一切jquery和我们现在要用的插件都帮我们封装的很好,而且很好用。你要做的就是选对你要施展下拉联动效果的对象即可。(也就说可以看一下jquery的选择器,就是如何选标签就是js中的DOM,这个真是太简单了,我想没有必要多讲吧!)
首先是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“的列表项,并且是选中状态下载地址http://bbs.jquery.org.cn/viewthread.php?tid=637&extra=page%3D1
用的最多的Jquery插件:AjAx下拉列表框(SELECT)jquery插件
jQuery AJAX
前往
- Software
- ↳ CodeCharge Studio
- ↳ CodeCharge
- ↳ DemoCharge
- ↳ SuperPDF
- ↳ 551einv
- ↳ E3進銷存
- 程式語言
- ↳ PHP
- ↳ CodeLobster PHP Edition
- ↳ Yii
- ↳ CodeIgniter
- ↳ Phalcon
- ↳ Symfony
- ↳ FuelPHP
- ↳ Zend Framework 2
- ↳ laravel
- ↳ WordPress
- ↳ ASP.NET/C#
- ↳ ASP/VBScript
- ↳ JSP
- ↳ Java Servlets
- ↳ ColdFusion
- ↳ Perl
- ↳ Java Script
- ↳ jQuery
- ↳ HTML + CSS
- ↳ jQuery
- ↳ nodejs
- ↳ VB6
- ↳ Git
- ↳ App Inventor 2
- ↳ bash
- ↳ C++/ VC/ OpenCV
- ↳ OpenCV
- ↳ go
- ↳ cordova
- ↳ python
- ↳ Xamarin
- ↳ Assembly
- 資料庫
- ↳ MySQL
- ↳ PostgreSQL
- ↳ ORACLE
- ↳ Access
- ↳ SQL Server
- ↳ SQLite
- ↳ MariaDB
- ↳ Mongodb
- 作業系統
- ↳ Linux
- ↳ Ubuntu
- ↳ CentOS
- ↳ Mint
- ↳ Mandriva
- ↳ Debian
- ↳ Red Hat Enterprise Linux
- ↳ Oracle Linux
- ↳ Fedora
- ↳ Kali Linux
- ↳ OpenSUSE
- ↳ Elementary OS
- ↳ Microsoft
- ↳ Server 2008 R2
- ↳ Server 2012 R2
- ↳ Server 2012
- ↳ 8
- ↳ 10
- ↳ System Center 2016
- ↳ NOVELL
- ↳ FreeBSD
- ↳ VMware
- ↳ VirtualBox
- ↳ Mac OS X
- ↳ Solaris
- ↳ iOS
- ↳ Android
- ↳ Cloud
- ↳ OpenStack
- ↳ Docker
- ↳ Proxmox VE
- ↳ CloudReady
- ↳ chrome
- 網頁伺服器
- ↳ apache
- ↳ tomcat
- ↳ nginx
- ↳ IIS
- ↳ JBoss
- ↳ weblogic
- ↳ WebHosting
- 硬體
- ↳ 硬體及週邊
- ↳ RouterOS
- ↳ LEGO NXT
- ↳ Arduino
- ↳ MSP430
- ↳ Raspberry Pi
- ↳ OpenERP
- ↳ Storage
- ↳ Server
- ↳ Brocade
- ↳ MODELS
- ↳ FortiGate
- 軟體
- ↳ sublime
- ↳ LibreNMS