最近跟的一个项目整体的架构采用的是win 8(metro)风格，里面用到了很多插件，其中有一个select2.js(官网：http://ivaynberg.github.io/select2)，这个插件的功能非常强大，我只用到了其中的一个——联动查询。
一、页面部分
- <input type="text" id="num">
二、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)<dataObj.total; //用来判断是否还有更多数据可以加载
- return {
- results:dataObj.result,more:more
- };
- }else{
- return {results:data};
- }
- }
- },
- initSelection:function(element,callback){ //初始化，其中doName是自定义的一个属性，用来存放text的值
- var id=$(element).val();
- var text=$(element).attr("doName");
- if(id!=''&&text!=""){
- callback({id:id,text:text});
- }
- },
- formatResult: formatAsText //渲染查询结果项
- });
- })
- //格式化查询结果,将查询回来的id跟name放在两个div里并同行显示，后一个div靠右浮动
- function formatAsText(item){
- var itemFmt ="<div style='display:inline;'>"+item.id+"</div><div style='float:right;color:#4F4F4F;display:inline'>"+item.name+"</div>"
- 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 ，<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">写成这样子 样式会有问题，至于到底是什么原因我也不太清楚，应该写成<!DOCTYPE HTML>
相关推荐
jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单
Select2 是一个流行的 jQuery 插件，它提供了强大的下拉选择框增强功能，使得在实现这样的功能时更加便捷高效。本项目就是利用 Select2 插件来实现全国城市三级联动的一个实例。 1. **Select2 插件基础** Select2 ...
同时，可以考虑使用插件如`select2`来增强`select`元素的样式和功能。 综上所述，jQuery实现的select互斥联动是一种常见的前端交互设计，通过监听和处理事件，动态调整下拉列表的选项，以满足不同场景下的用户需求...
本话题主要关注的是使用jQuery实现的二级联动下拉菜单，这是一种常见的交互设计，常用于网站的筛选或导航功能。下面将详细介绍这种二级联动菜单的实现原理、步骤以及相关的jQuery知识。 首先，联动菜单的基本概念是...
2. 引入jQuery库和该联动插件的JavaScript文件。 3. 使用jQuery选择器获取这三个元素，并调用插件提供的方法进行初始化，传入必要的参数如默认值。 4. 配合CSS进行样式定制，以适应网站的整体风格。 在浏览器兼容性...
带select下拉选择框美化的jQuery省市区三级联动插件，网络上很多城市三级联动选择插件，但是 大部分是采用传统的select下拉框选择，本插件利用ul模拟美化select选择框，界面还是很不错的 最终选择的值会赋值到隐藏...
《jQuery多级联动美化版Select下拉框插件详解》 在Web开发中，下拉框（Select）作为常见的表单元素，常用于提供多个选项供用户选择。然而，原生的HTML Select元素在样式控制和交互效果上相对单一，难以满足现代网页...
此时，可以引入专门的jQuery市级联动插件，如`jquery-province-city-select`等，这些插件通常已经封装了上述功能，使开发者能更快速、便捷地实现需求。 在提供的压缩包中，很可能包含了这个插件的源码、示例代码...
标题 "jquery -- select美化--多级联动下拉" 指的是利用 jQuery 插件来实现 Select 的美化和多级联动效果。这种技术可以提升用户体验，使得用户在选择过程中能够更加直观、便捷地找到目标选项。 首先，jQuery 插件...
《jQuery省市区三级联动插件：城市选择的高效解决方案》 在网页开发中，省市区三级联动是一个常见的功能，尤其在注册、地址填写等场景下不可或缺。jQuery作为一款广泛使用的JavaScript库，为开发者提供了丰富的API...
"jQuery年月日三级联动(生日)插件"就是为了简化这一过程而设计的，它使得用户能更直观、高效地选择日期，提高了用户体验。这个插件通过将年、月、日分别作为三个下拉菜单，实现联动效果，即用户在选择一个年份后，...
**jQuery省市区三级联动插件**是一种常见的前端开发技术，用于在网页上实现省、市、区（县）的联动选择效果。这种效果通常应用于地址输入、订单填写等场景，可以方便用户快速选择地理位置，提高用户体验。在...
3. **jQuery插件**：编写jQuery插件来实现联动逻辑。插件通常是一个自定义函数，可以通过$.fn.extend()扩展到jQuery对象上。以下是一个简单的示例： ```javascript $.fn.citySelector = function(data) { this....
**jQuery JSON 省市区街道四级联动地址选择插件** 在网页开发中，尤其是在电子商务网站或者需要用户填写详细地址的应用中，四级联动地址选择插件是一个常见且实用的功能。它通常包括省、市、区（县）和街道四个级别...
jQuery 年月日插件提供了一种简洁高效的方式，实现了年、月、日的下拉联动效果，使得用户界面更加友好且易于操作。本文将详细介绍这个插件的使用方法和关键知识点。 ### 一、引入插件 首先，我们需要在项目中引入 ...
**jQuery省市区三级联动插件city-picker详解** 在网页开发中，经常需要实现省市区三级联动的效果，即用户选择一个省份后，相应的城市列表自动更新，再选择城市时，对应的区县列表也会随之变化。这种功能可以提升...
这种插件通常基于JavaScript库jQuery构建，能够实现省份、城市、区县三级选择的联动效果，即当用户选择一个省份时，相关的城市会自动加载，接着选择城市后，对应的区县也会动态显示。这样的设计不仅提高了用户体验，...
实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect，功能强大非常不错的jQuery插件， 支持省市区三级联动以及全球国家城市的联动，数据采用JSON格式导入，非常方便的，强大的参数 自定义功能，还可以...
本资源"jQuery基于citypicker四级联动菜单选择器代码.zip"提供了一个实现城市选择器功能的jQuery插件，适用于网页表单，尤其是需要用户输入详细地址的场景。 首先，我们来理解一下什么是四级联动菜单。在网页设计中...