select联动 mysql_使用select2插件做联动查询

最近跟的一个项目整体的架构采用的是win 8(metro)风，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。 效果图： 一、页面部分 input type=text id=num

最近跟的一个项目整体的架构采用的是win 8(metro)风格，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。

效果图：

一、页面部分

二、js部分

$(document).ready(function({

$("#num").select2({

placeholder:"输入一个AS号码",//文本框的提示信息

minimumInputLength:1,//至少输入n个字符，才去加载数据

allowClear: true,//是否允许用户清除文本信息

ajax:{

url:'${pageContext.request.contextPath }/……!getASNumber.do',//地址

dataType:'text',//接收的数据类型

//contentType:'application/json',

data: function (term, pageNo) {//在查询时向服务器端传输的数据

term = $.trim(term);

return {

autNumber: term, //联动查询的字符

pageSize: 15,//一次性加载的数据条数

pageNo:pageNo,//页码

time:new Date()//测试

}

},

results:function(data,pageNo){

if(data.length>0){//如果没有查询到数据，将会返回空串

var dataObj =eval("("+data+")");//将接收到的JSON格式的字符串转换成JSON数据

var more = (pageNo*15)//格式化查询结果,将查询回来的id跟name放在两个div里并同行显示，后一个div靠右浮动

function formatAsText(item){

var itemFmt ="

"+item.id+"

"+item.name+""

return itemFmt;

}

三、需要服务器端传输的数据格式：“{'result':[{'id':'4048','text':'4808','name':'CHINA169-BJ'},{'id':'4048','text':'4808','name':'CHINA169-BJ'}],'total':'1'}”

注：返回的数据格式是json格式的，result存放的是符合查询条件的记录前n条数据的一些属性，total存放的是符合查询条件的记录的总数

在联动查询的过程中，向服务器端传送了四个参数，其中 asNumber是指定的查询的数据，pageNo和pageSize是用来做分页效果的(注：需要自己在后台根据页号跟页码实现分页) ，分别代表页码和每页的记录数，在这里先加载了15条数据，当你鼠标滚动到最底部的时候，就会根据你传的这三个参数，加载下15条的数据。

在做的过程中遇到了一些困难，因为有关select2的资料很少， 官网上的例子又看不太明白，花了三天时间才做出来 。在这里整理出来与大家分享，希望大家看过之后给我提一些宝贵意见。

用到的js跟css大家可以到官网上去下载，也可以在这里http://download.csdn.net/detail/zdx1515888659/6588415下载。

注：在用编辑器生成代码时，要注意DOCTYPE ，写成这样子 样式会有问题，至于到底是什么原因我也不太清楚，应该写成

本文原创发布php中文网，转载请注明出处，感谢您的尊重！