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 ...
随机推荐
- .net webapi 接收保存图片到服务器，并居中剪裁压缩图片
原文链接:https:////www.cnblogs.com/Jackyye/p/12510943.html 每天解决一些c#小问题,在写微信小程序,或者一些手机软件接口,我们经常要用到上传图片到服务 ...
- （转）ARM协处理器主要用途 及其 指令CDP LDC STC MCR MRC介绍
原文地址:http://zqwt.012.blog.163.com/blog/static/120446842010111610612200/ ARM 微处理器可支持多达 16 个协处理器,用于各种协 ...
- 「newbee-mall新蜂商城开源啦」GitHub 上最热门的 Spring Boot 项目，我也要做一次靓仔！
没有一个冬天不可逾越,也没有一个春天不会到来. 介绍一下新蜂商城的近况,同时,新蜂商城 Vue 版本目前也在开发中,在这篇文章里我也向大家公布一下新蜂商城 Vue 版本的开发进度,和大家同步一下,在不 ...
- 【简说Python WEB】flask-mail电子邮件
目录 flask-mail flask shell发送邮件 系统环境:Ubuntu 18.04.1 LTS Python使用的是虚拟环境:virutalenv Python的版本:Python 3.6 ...
- Swift 4.0 字典(Dictionary)学习
定义字典常量(常量只有读操作) let dictionary1 = ["key1": 888, "key2": 999] let dictionary2: [S ...
- Python-函数练习题1
# coding=utf-8 '''定义一个方法get_num(num),num参数是列表类型,判断列表里面的元素为数字类型.其他类型则报错, 并且返回一个偶数列表:(注:列表里面的元素为偶数).'' ...
- 洛谷1541 乌鬼棋 dp入门
题目链接:https://www.luogu.com.cn/problem/P1541 给定一个序列和一个操作序列,操作序列中只有1234四个数字,表示可以前进的步数,初始在1处,操作最后一定会全部用 ...
- hdu2492树状数组
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2492/ 题目大意:给定一个序列,求长度为三的子序列(a,b,c)使得a<b<c或a>b> ...
- 二进制补码：Why & How
二进制补码:Why & How 学习计算机原理或者语言的底层操作难免会遇到用二进制补码表示负数的问题.由于一些书本上对于采用补码的原因没有详细解释,很多人会认为这只是一种规定,但实际上采用补码 ...
- 第十八周java实验作业
实验十八 总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...