select2为代替常规的select而出现,可自定义select的样式,最明显的功能就是集合中可以搜索

关于浏览器要求,ie8+,Chrome 8+,Firefox 10+,Safari 3+,Opera 10.6+

基本案列

<head>

<link href="select2.css" rel="stylesheet"/>

<script src="select2.js"></script>

<script>$(document).ready(function() { $("#qingyu").select2(); });</script>

</head>

<body>

<select id="qingyu">

    <option value="AL">Alabama</option>

    ...

    <option value="WY">Wyoming</option>

</select>

</body

可多选

    $("#qingyu").select2({

    allowClear: true//单选

    });

    $("#qingyu").select2();//多选

效果图如下:

js方式初始化

$("#qingyu").select2("data",[{id:"CA", text:"California"},{id:'abc',text:'sadf'}]);

一些常用操作

 //单选

    $(".qingyu").click(function () { alert("Selected value is: "+$("#qingyu").select2("val"));});//获取选中值

    $(".qingyu").click(function () { alert("Selected value is: "+$("#qingyu").select2("data").text);});//获取文本

    $(".qingyu").click(function () { $("#qingyu").select2("val", "CA"); });//设置选中值

    $(".qingyu").click(function() { $("#qingyu").select2("val", ""); });//清除选中值为初始值

    $(".qingyu").click(function () { var data = $("#qingyu").select2("data"); delete data.element; alert("Selected data is: "+JSON.stringify(data));});//下拉框元素信息

    $(".qingyu").click(function () { $("#qingyu").select2("data", {id: "CA", text: "California"}); });//添加且选中

    $(".qingyu").click(function () { $("#qingyu").select2("open"); });//打开下拉框

    $(".qingyu").click(function () { $("#qingyu").select2("close"); });//关闭下拉框

    //多选

    $(".qingyu").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});//获取选中值

    $(".qingyu").click(function () { $("#qingyu").select2("val", ["CA","MA"]); });//设置选中值

    $(".qingyu").click(function () { alert("Selected value is: "+JSON.stringify($("#qingyu").select2("data")));});//下拉框元素信息

    $(".qingyu").click(function () { $("#qingyu").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });//添加且选中

    $(".qingyu").click(function() { $("#qingyu").select2("val", ""); });//清除选中值为初始值

    $(".qingyu").click(function () { $("#qingyu").select2("open"); });//打开下拉框

    $(".qingyu").click(function () { $("#qingyu").select2("close"); });//关闭下拉框

开发中用到：
var a = [];
$.each(contactTarget, function(point, item){
    var one = {};
    one.id = item.groupId;
    one.text = item.groupName;
    a.push(one);
});

var select = $(".select2", wraper);
select.select2({tags:a});
select.select2("data",a);
												


											
插件之下拉框Select2的更多相关文章
	

    
								
  1. 非常实用的select下拉框-Select2.js
		
    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
    
		
    2. 
						
  2. yii2组件之下拉框带搜索功能（yii-select2）
		
    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...
    
		
    3. 
						
  3. ASP.NET MVC之下拉框绑定四种方式（十）
		
    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
    
		
    4. 
						
  4. 转：python webdriver API 之下拉框处理
		
    下拉框也是 web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位,我们在前面的例子中已经有过使用,下面通过 ...
    
		
    5. 
						
  5. thymeleaf之下拉框回显选中
		
    #1.select下拉框取值    <div class="form-group ">        <label id="resource" ...
    
		
    6. 
						
  6. 【Python+selenium Wendriver API】之下拉框定位
		
    上代码: # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains impo ...
    
		
    7. 
						
  7. Python自动化之下拉框，隐藏标签定位 代码&报错解决
		
    python自动化:下拉框定位方法之select标签  style="display: none;" 报错 selenium.common.exceptions.ElementNo ...
    
		
    8. 
						
  8. Selenium之下拉框操作
		
    下拉框操作: 一般下拉框适用场景:在新增时有下拉框选项,在二级联动或多级联动有下拉(比如:在选择省市县时的多级联动下拉). 下拉框选择都有select的标签属性,存在两个属性select和option ...
    
		
    9. 
						
  9. （十一）easyUI之下拉框
		
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 〖QT编程〗在Qt编程中使用/显示中文编码
			
    在main.cpp中添加: #include "QTextCodec" QTextCodec *codec = QTextCodec::codecForName("Sys ...
    
			
    2. 
						
  2. Matlab变量、分支语句和循环语句
			
    一.Matlab的变量 1.变量的命名 Matlab的变量名由数字.字母和下划线组成,可是仅仅能由字母开头.大写和小写敏感,最大长度为63个字符.不能使用Matlab的关键字作为变量名,应当避免使用函 ...
    
			
    3. 
						
  3. 转：【Linux】linux系统中find和whereis查找命令常用示例
			
    转载至:wanqi博客园:http://www.cnblogs.com/wanqieddy/archive/2011/06/09/2076785.html whereis 命令,直接查找需要的文件名称 ...
    
			
    4. 
						
  4. HTML5 学习笔记 应用程序缓存
			
    使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本. html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...
    
			
    5. 
						
  5. C++求两个数的最大值
			
    //不使用if,:?等推断语句.求两个数字中最大的那个数字. #include<iostream> using namespace std; int main() { int a = -1 ...
    
			
    6. 
						
  6. iframe双滚动栏 解决方案  CSS3 overflow-y 属性
			
     裁剪 div 元素中内容的左/右边缘 - 假设溢出元素的内容区域的话: div { overflow-y:hidden; } <!DOCTYPE html> <html> ...
    
			
    7. 
						
  7. python开发者通过国内镜像安装pip包
			
    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...
    
			
    8. 
						
  8. Oracle10g 安装步骤
			
    一.Oracle10g 安装预备步骤 取得 Oracle 10g 安装程序,或从 Oracle 技术网(OTN)下载光盘映像.在评估阶段您可以免费下载和使用无技术限制的全功能 Oracle,但在正式的 ...
    
			
    9. 
						
  9. Windows 2003 IIS 不支持ASP问题的解决方法
			
    有时候我们在配置iis的时候,为了安全关闭了asp的支持,下面我们来介绍下让iis支持asp的一些注意事项特别注意:当我们在没有配置好iis的时候,不要安装补丁了,组件之类的东西,先把网站弄开通了,再 ...
    
			
    10. 
						
  10. Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
			
    Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...
    
			
    11.