select2 取值 遍历 设置默认值

本章内容主要介绍Select2 的初始化，获取选中值，设置默认值，三个方法。Select2 美化了单选框，复选框和下拉框，特别是下拉框多选的问题。但同时，Select2也有很多吭。

效果图：

使用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%;" onchange="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

select2 取值 遍历 设置默认值的更多相关文章

  1. select2 插件编辑时设置默认值

    function htDate(selectCustomerId, val) { var customerId = selectCustomerId; var values = val; ajaxJs ...

  2. Js得到radiobuttonlist选中值，设置默认值

    JS 代码 var vRbtid=document.getElementById("rbtid");      //得到所有radio      var vRbtidList= v ...

  3. Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数

    Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4  为外部参数设置默认值 开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift1 ...

  4. spring @Value 设置默认值

    @Value("${spring.value.test}") private String value; 如果配置文件中没有设置 spring.value.test 在启动的时候讲 ...

  5. spring 配置文件属性设置默认值以及读取环境变量值

    在 Spring 中为 javabean 注入属性文件中的属性值一般人都知道的,可以通过 org.springframework.beans.factory.config.PropertyPlaceh ...

  6. ng-option指令使用记录，设置默认值需要注意

    ng-options一般有以下用法: 数组作为数据源: label for value in array select as label for value in array label group ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...

  8. EF Core1.0 CodeFirst为Modell设置默认值!

    当我们使用CodeFirst时,有时候需要设置默认值! 如下 ; public string AdminName {get; set;} = "admin"; public boo ...

  9. 使用mysql 命令行，增加 ，删除 字段 并 设置默认值 及 非空

    使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...

随机推荐

  1. 【机器学习实战】第7章 集成方法 ensemble method

    第7章 集成方法 ensemble method 集成方法: ensemble method(元算法: meta algorithm) 概述 概念:是对其他算法进行组合的一种形式. 通俗来说: 当做重 ...

  2. win10 uwp App-to-app communication 应用通信

    这篇文章都是乱说的,如果觉得有不好的,可以发我邮箱 应用之间需要相互的发送信息,就是我们经常用的分享 有个人看到一个网页很好,于是就希望把这个网页发送到邮件,那么这样的话就是使用应用通信. 因为每个应 ...

  3. laravel框架包资源分享

    最近发现laravel框架包很难下,楼楼之前下了两个版本,分享一下,希望对大家有所帮助.laravel-v5.2.15 链接: https://pan.baidu.com/s/1qYyhbFe 密码: ...

  4. PDO详解

    PDO扩展为PHP定义了一个访问数据库的轻量的,持久的接口.实现了PDO接口的每一种数据库驱动都能以正则扩展的形式把他们各自的特色表现出来.注意:利用PDO扩展本身并不能实现任何数据库函数.你必须使用 ...

  5. eclipse创建一个文件夹

    如何给eclipse创建一个文件夹,便于项目的管理:有时我们的eclipse中会有很多项目的,有的是公司的如Project1,Project2,Project3....还有的呢, 也可能是自己平时做的 ...

  6. 运用El表达式截取字符串/获取list的长度

    ${fn:substring(wjcd.lrsj, 0, 16)} 使用functions函数来获取list的长度 ${fn:length(list)} 引入 <%@ taglib prefix ...

  7. phalcon——验证

    一个完整的使用实例:(验证模型数据) use Phalcon\Mvc\Model; use Phalcon\Mvc\Model\Validator\Email as EmailValidator; u ...

  8. SpringMVC的流程分析（一）—— 整体流程概括

    SpringMVC的整体概括 之前也写过springmvc的流程分析,只是当时理解的还不透彻所以那篇文章就放弃了,现在比之前好了些,想着写下来分享下,也能增强记忆,也希望可以帮助到人,如果文章中有什么 ...

  9. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  10. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...