javascript 入门 之select2功能大全
1.代码较为简单，不作太多讲解，新建一个javascript工程，在index.htl中编写如下代码，根据<link>和<script>标签配制好js和css库便可！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta lang="zh"/>
<title>select2</title>
<script src="js/jquery-3.3.1.js"></script>
<link href="css/select2.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-table.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/select2.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<table id = "demo">
</table>
</div>
<button οnclick="unall()">禁用全部</button>
<button οnclick="onall()">启用全部</button>
<button οnclick="msg()" id = "btn">select2触发</button>
<button οnclick="adddata()">增加数据</button>
<button οnclick="adddata_temp()">判断增加数据</button>
<button οnclick="setdata()">设置值</button>
<!--给select2设置值-->
<button οnclick="setnull()">设置空</button>
<button οnclick="getvalue()">得到值(data方法)</button>
<button οnclick="getvalue_()">得到值(jquery选择器)</button>
<button οnclick="jud_init()">判断是否初始化</button>
<button οnclick="kill()">销毁select2</button>
<button οnclick="help()">启用select2</button>
<button οnclick="on_()">绑定select事件</button>
<button οnclick="off_()">解除绑定select事件</button>
<button οnclick="trigger()">触发事件</button>
<select class="test" multiple="multiple" style="width:300px">
<optgroup label="阿拉伯数字">
<option>1</option>
<option disabled="disabled">2(禁用)</option>
<option>3</option>
</optgroup>
<optgroup label="汉字">
<option selected="selected">一</option> //默认选中
<option disabled="disabled">二(禁用)</option>
<option>三</option>
</optgroup>
</select>
<script type="text/javascript">
function formatState (state) {
if (!state.id) {
return state.text;
}
var $state = $(
'<span><img src="' + 'images/1.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
function msg(){
alert('select2点击触发');
}
function adddata(){
var data = {
id: 6,
text: '四'
};
var newOption = new Option(data.text,data.id,false,false);
$('.test').append(newOption).trigger('change');
}
function adddata_temp(){
var data = {
id: 6,
text: '五'
};
if ($('.test').find("option[value='" + data.id + "']").length) {
$('.test').val(data.id).trigger('change');
} else {
var newOption = new Option(data.text, data.id,true,true);
$('.test').append(newOption).trigger('change');
}
}
function setdata(){
$('.test').val(['1','三']);
$('.test').trigger('change');
}
function setnull(){
$('.test').val(null).trigger('change');
}
function getvalue(){
var info = $(".test").select2('data');
alert('数据类型:' + typeof info);
alert("数据值:" + JSON.stringify(info));
}
function getvalue_(){
var info = $('.test').find(':selected').data('own'); //调用自定义 'own' 属性
alert(JSON.stringify(info));
}
function jud_init(){
if ($('.test').hasClass("select2-hidden-accessible")) {
alert('已初始化');
}else{
alert('未初始化');
}
}
function kill(){
$('.test').select2('destroy');
}
function help(){
$('.test').select2();
}
function on_(){
$('.test').on('select2:select',function (e) {
alert(JSON.stringify(e.params.data));
})
}
function off_(){
$('.test').off('select2:select');
alert('off select');
}
function trigger() { //该函数的执行会触发select2:select事件的执行，即一点trigger按扭会触发select2:select（在本文是on_()函数的执行）
var data = {
"id": 10,
"text": "胡海",
"nick": "蓝月"
};
$('.test').trigger({
type: 'select2:select',
params: {
data: data
}
});
}
$(document).ready(function () {
$('.test').select2({
templateResult:formatState, //下拉列表的格式
//templateSelection: formatState, //选择后的格式
dropdownParent:$('#btn'),
tags: true, //允许自定义值（在框内输入自定义值后回车）
allowClear: true, //都允许删除
maximumSelectionLength:2, //最大允许选择两个
tokenSeparators:[','], //自定义值时，输入','则完成自定义
createTag: function (params) { //必须包括'@'元素才能完成自定义值
if (params.term.indexOf('@') === -1) {
return null;
}
return {
id: params.term,
text: params.term
}
},
insertTag: function (data, tag) {
data.push(tag);
}
,templateSelection: function (data,container) { //创建自定义 'own' 属性，值为 'this is my data'
$(data.element).attr('data-own','this is my data');
return data.text + typeof container;
}
});
})
$('#demo').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '商品'
}, {
field: 'price',
title: '价格'
}, {
field: 'country',
title: '国家',
formatter:function (value,row,index) {
return'<select class="from" name="states[]" multiple="multiple" οnchange="change_value(this.options[this.options.selectedIndex].value)" style="width: 200px">\n' + '</select>';
}
}],
onLoadSuccess: function () { //加载成功时执行a
console.info("加载成功");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
},
data: [{
id: 1,
name: '电脑',
price: '$1000',
country:'中国'
}, {
id: 2,
name: '冰箱',
price: '$500',
country:'美国'
}, {
id: 3,
name: 'country',
price:'$10000',
country: '意大利'
}]
});
function init() {
var countrys = [
'中国',
'美国',
'意大利'
];
$('.from').select2({
data:countrys
});
}
function unall(){
$('.from').prop('disabled',true);
}
function onall(){
$('.from').prop('disabled',false);
}
function change_value(value){
alert('change:' + value);
}
$(document).ready(function () {
init();
})
$('.from').on('select2:open',function () {
alert('on open');
})
$('.from').on('select2:select',function () {
alert('on select');
})
$('.from').on('select2:close',function () {
alert('on close');
})
$('.from').change(function () {
alert('change');
})
$('.from').on('select2:unselect',function () {
alert('on unselect');
})
$('.from').on('select2:opening',function () {
alert('on opening');
})
$('.from').on('select2:selecting',function () {
alert('on selecting');
})
$('.from').on('select2:unselecting',function () {
alert('on unselecting');
})
$('.from').on('select2:closing',function () {
alert('on closing');
})
</script>
</body>
</html>注意：
1.想要正确运行本项目，需要在项目根目录创建images目录，并放置一张 '1.png' 的图片
运行结果：
javascript 入门 之select2功能大全的更多相关文章
- javascript 入门 之select2获取远程数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...
- javascript 入门 之select2选择本地数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lan ...
- JavaScript入门篇 编程练习
编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...
- JavaScript入门
本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...
- 慕课网JavaScript入门篇课程笔记
1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- Swift入门教程:基本语法大全
原文:Swift入门教程:基本语法大全 简介: ...
- JavaScript入门篇
记录一下在慕课网学习JavaScript的过程. 以下内容均来自慕课网. 传送:https://www.imooc.com/code/401 为什么学习JavaScript 1. 所有主流浏览器都支持 ...
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
随机推荐
- 数据结构和算法：Python实现二分查找（Binary_search）
在一个列表当中我们可以进行线性查找也可以进行二分查找,即通过不同的方法找到我们想要的数字,线性查找即按照数字从列表里一个一个从左向右查找,找到之后程序停下.而二分查找的效率往往会比线性查找更高. 一. ...
- Natas12 Writeup（文件上传漏洞）
Natas12: 文件上传页面,源码如下: function genRandomString() { $length = 10; $characters = "0123456789abcde ...
- 108. Convert Sorted Array to Binary Search [Python]
108. Convert Sorted Array to Binary Search Given an array where elements are sorted in ascending ord ...
- Js的new运算符
new运算符 在JavaScript中,new是一个语法糖,可以简化代码的编写,可以批量创建对象实例. 语法糖Syntactic sugar,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影 ...
- Cisco 模拟配置
本次模拟:采用Cisco Packet Tracer 软件,进行cisco网络设备的模拟.可以实现CLI界面命令配置,同实际交换机一样. 1.同一VLAN 可以互相访问,不同VLAN 不能访问 PC0 ...
- POJ1144 tarjan+网络中割点与割边的数量
题目链接:http://poj.org/problem?id=1144 割点与割边的数量我们可以通过tarjan的思想从一个点开始对其余点进行访问.访问的顺序构成一棵dfs树,其中根节点到任何一个结点 ...
- hdu3294 Manacher算法模板
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3294/ 回文长度如果是mxx,回文中心是id的话,在扩展串中(id-mxx+1,id+mxx-1)的这段中去除标 ...
- xmake v2.3.2 发布, 带来和ninja一样快的构建速度
这个版本重点重构优化了下内部并行构建机制,实现多个target间源文件的并行编译,以及并行link的支持,同时优化了xmake的一些内部损耗,修复影响编译速度的一些bug. 通过测试对比,目前的整体构 ...
- 原来 CPU 为程序性能优化做了这么多
本文主要来学习内存屏障和 CPU 缓存知识,以便于我们去了解 CPU 对程序性能优化做了哪些努力. 首先来看下 CPU 缓存: CPU 缓存 CPU 缓存是为了提高程序运行的性能,CPU 在很多处理上 ...
- HDU - 1005 Number Sequence 矩阵快速幂
HDU - 1005 Number Sequence Problem Description A number sequence is defined as follows:f(1) = 1, f(2 ...