select2 取值遍历设置默认值

本章内容主要介绍Select2 的初始化，获取选中值，设置默认值，三个方法。Select2 美化了单选框，复选框和下拉框，特别是下拉框多选的问题。但同时，Select2也有很多吭（单选下拉框有明显的搜索输入框，而多选下拉框没有，但实际也支持多选。直接在input框输入即可）。

效果图：

需求：使用Select2实现下拉框多选，并获取选中值，初始设置默认值

技术：select2.js ，prototype.js，jquery.js

源码：https://github.com/ITDragonBlog/daydayup/tree/master/JQuery-select2/select2-4.0.0

说明：select2是jquery插件，取值和设置默认值都可以用jquery单独完成。为什么用prototype.js ？因为在公司用prototype.js 写的，笔者因为各种原因，没有用jquery重写（原谅我比较懒）。还有一点值得注意：获取的文本值可能有空格哦！！！笔者就是被吭了一脸！

一切尽在代码中：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>select2实例</title>
<<link rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="select2-4.0.0/dist/css/select2.min.css" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="select2-4.0.0/dist/js/select2.min.js"></script></head>
<body><label class="control-label col-sm-1">个性标签（checkbox）: </label><div class="col-sm-3"><select class="select_gallery-multiple" multiple="multiple" style="width:100%;" οnchange="getSelectData()" id="mul-itdragon"><optgroup label="这样真的好么？"><option value="0">打野</option><option value="01">上单</option><option value="02">中单</option><option value="03">送人头</option></optgroup><optgroup label="职位"><option value="1">土豪</option><option value="2">屌丝</option><option value="3">单身dog</option><option value="4">苹果粉</option><option value="5">苦逼程序员</option></optgroup></select></div><label class="control-label col-sm-1">个性标签（radio）: </label><div class="col-sm-3"><select class="select_gallery" style="width:100%;" id="itdragon"><optgroup label="这样真的好么？"><option value="0">打野</option><option value="01">上单</option><option value="02">中单</option><option value="03">送人头</option></optgroup><optgroup label="职位"><option value="1">土豪</option><option value="2">屌丝</option><option value="3">单身dog</option><option value="4">苹果粉</option><option value="5">苦逼程序员</option></optgroup></select></div><script type="text/javascript">var $jq = jQuery.noConflict();// 初始化多选select2$jq(".select_gallery-multiple").select2();// 初始化单选select2$jq(".select_gallery").select2();// 默认选择select2ByText ("mul-itdragon", "苦逼程序员");select2ByValue ("itdragon", "03");// 通过id获取select2的value值function getSelect2Value(obj) {var select2Obj = $jq('#'+obj).select2();return select2Obj.select2("val");}// 通过id获取select2的text值，这里的text值可能有空格，需注意function getSelect2Text(obj) {var select2Obj = $jq('#'+obj).select2();return select2Obj.find("option:selected").text();}// 通过text 设置select2的默认值function select2ByText (obj, text) {var select2Obj = $jq('#'+obj).select2();$(obj).select("option").each(function(data){if (text == data.text.strip()) {select2Obj.val(data.value).trigger("change");}});}// 通过value 设置select2的默认值function select2ByValue (obj, value) {var select2Obj = $jq('#'+obj).select2();select2Obj.val(value).trigger("change");}function getSelectData(){console.log(getSelect2Value("mul-itdragon"));console.log(getSelect2Text("itdragon"));var mulItdragonVal = $jq("#mul-itdragon").select2("val");if (null == mulItdragonVal) {console.log("Over !");return ;}console.log(mulItdragonVal);var mulItdragonData = $jq("#mul-itdragon").select2('data');mulItdragonData.each(function(data){console.log("value : ", data.id);console.log("text : ", data.text);});}</script>
</body>
</html>

这样就做好了，是不是很简单，如果不能满足你的需求，可以去官网学习：http://select2.github.io/examples.html

资源下载：http://download.csdn.net/detail/qq_19558705/9290851 （本来是0积分分享的，被csdn设置成15积分。大家就用上面的github地址吧）

select2 取值遍历设置默认值相关推荐

select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的opti ...
输入框input type=“text“（获取值、设置默认值）
<input type="text" class="form-control" id="name" placeholder=" ...
ajax默认什么方法,ajax设置默认值ajaxSetup()方法
$(function(){ //设置全局 jQuery Ajax全局参数 $.ajaxSetup({ type:"POST", async:false, cache:false, ...
Spring @Value 设置默认值
前言 springboot 2.1.1.RELEASE @Value 未设置默认值时的表现 org.springframework.beans.factory.BeanCreationExceptio ...
mysql默认值_MySQL之默认值
定义: "默认值(Default)"的完整称呼是"默认值约束(Default Constraint)".MySQL默认值约束用来指定某列的默认值.如果插入一条新 ...
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4 为外部参数设置默认值开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift ...
Elasticsearch 设置默认值的三种方式
1.实战问题在使用 Elasticsearch 过程中,不免还会有 Mysql 等关系型数据库的使用痕迹,以下两个都是实战开发问到的问题: Elasticsearch 新增字段,能在 Mapping ...
【Shell】设置变量默认值，参数默认值, 自动赋值
设置变量默认值,参数默认值, 自动赋值转自:https://zhuanlan.zhihu.com/p/98636736 默认参数(变量默认值) if 繁琐方式 if [ ! $1 ]; then$1 ...
c mysql 的默认值_为mysql表字段设置默认值的方法及注意细节
为mysql表字段设置默认值的方法及注意细节,有需要的朋友可以参考下. 环境:MySQL 5.1 + 命令行工具问题:MySQL表字段设置默认值解决方法: 代码如下: --SQL: CREATE ...

select2 取值遍历设置默认值

select2 取值遍历设置默认值相关推荐

最新文章

热门文章

select2 取值 遍历 设置默认值

select2 取值 遍历 设置默认值相关推荐

最新文章

热门文章

select2 取值遍历设置默认值

select2 取值遍历设置默认值相关推荐