插件之下拉框Select2
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的更多相关文章
- 非常实用的select下拉框-Select2.js
在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
- yii2组件之下拉框带搜索功能(yii-select2)
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...
- ASP.NET MVC之下拉框绑定四种方式(十)
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
- 转:python webdriver API 之下拉框处理
下拉框也是 web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位,我们在前面的例子中已经有过使用,下面通过 ...
- thymeleaf之下拉框回显选中
#1.select下拉框取值 <div class="form-group "> <label id="resource" ...
- 【Python+selenium Wendriver API】之下拉框定位
上代码: # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains impo ...
- Python自动化之下拉框,隐藏标签定位 代码&报错解决
python自动化:下拉框定位方法之select标签 style="display: none;" 报错 selenium.common.exceptions.ElementNo ...
- Selenium之下拉框操作
下拉框操作: 一般下拉框适用场景:在新增时有下拉框选项,在二级联动或多级联动有下拉(比如:在选择省市县时的多级联动下拉). 下拉框选择都有select的标签属性,存在两个属性select和option ...
- (十一)easyUI之下拉框
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- 连载:面向对象葵花宝典:思想、技巧与实践(35) - NOP原则
NOP.No Overdesign Priciple.不要过度设计原则. 这应该是你第一次看到这个原则.而且你也不用上网查了,由于这个不是大师们创造的,而是我创造的:) 之所以提出这个原则,是我自己吃 ...
- windows中mongoDB安装教程
下载路径:http://downloads.mongodb.org/win32/mongodb-win32-i386-1.7.0.zip 将一个DB文件夹 我是放到D盘,路径:Ddb 解压mongod ...
- C# AutoResetEvent
文章转载自:C# AutoResetEvent AutoResetEvent 常常被用来在两个线程之间进行信号发送 AutoResetEvent是.net线程简易同步方法中的一种,两个线程共享相同的A ...
- SQLyog之MySQL客户端的下载、安装和使用(旗舰版)(推荐)
不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 ...
- github上创建ssh连接多个账户
简单的说用两对ssh密钥来连接多个github账户,有的同学问:用一对连接多个账户行吗?答案是不行,因为密钥和你的账户邮箱关联了. 1.生成密钥. sshkey -t rsa -b 4096 -C & ...
- Xamarin for VS 4.0.1.145 Stable版免费完整破解补丁
Xamarin for VS 4.0.1.145 Stable版免费完整破解补丁 支持Priority最高权限(超企业版)开发, 支持Android, IOS调试. 支持Android打包为Bund ...
- python3.7+opencv3.4.1
https://solarianprogrammer.com/2016/09/17/install-opencv-3-with-python-3-on-windows/ https://www.cnb ...
- CCFollow和ActionCallFunc
CCFollow动作,可以让一个节点跟随另一个节点做位移. CCFollow经常用来设置layer跟随sprite,可以实现类似摄像机跟拍的效果 效果是精灵在地图上移动,地图也会跟着移动,但是精灵仍然 ...
- 每日英语:Investing the Downward Dog Way? Adviser Suggests Deep Breaths
When the Dow Jones Industrial Average hit a new record this past March, Brent Kessel awoke at 3:30 a ...
- spring boot文件上传、下载
主题:Spring boot 文件上传(多文件上传)[从零开始学Spring Boot]http://www.iteye.com/topic/1143595 Spring MVC实现文件下载http: ...