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 ...
随机推荐
- 仿flash实现图片轮换播放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [日志分析]Graylog2进阶之获取Nginx来源IP的地理位置信息
如果你们觉得graylog只是负责日志收集的一个管理工具,那就too young too naive .日志收集只是graylog的最最基础的用法,graylog有很多实用的数据清洗和处理的进阶用法. ...
- PDIUSBD12管脚简述
PDIUSBD12管脚简述 PDIUSBD12管脚及简述 PDIUSBD12读写时序图 CS_N是片选信号,当片选信号位低电平时,下面的操作才有效.由于板子上将CS_N接地,所以它一 ...
- $api 回调函数then应用
getReceiveListAPI (param) { return new Promise(resolve => { let params = { // idCard: this.idCard ...
- Redux的createStore实现
Redux的createStore实现 使用过react的同学应该对Redux这个东西有所了解.他是一种全局状态管理的思想(对, 这里我觉得它是一种思想, 因为对于React来说, 其实Redux ...
- springcloud基础-eureka(注册中心)案例
一.新建项目,取名eureka-server pom.xml <?xml version="1.0" encoding="UTF-8"?> < ...
- wpf xaml CS0426 错误原因
wpf 程序集中 类命名空间名称和类名不能相同,否则在 xaml生成 i.g.cs时,会导致 自动生成代码无法推到处是类型还是命名空间的问题. 触发这个错误的条件是类命名空间 与 类名相同 并 ...
- 插了带蠕虫的U盘后，文件不见了怎么快速恢复
朋友插了别人U盘,电脑中毒,找到我,在网上找了一些教程,好多都是用杀软的,懒的下,亲测本教程简单有效 首先,我们创建了一个reg文件(注册表文件),如下, 利用REG文件我们可以直接对注册表进行任何修 ...
- 第三周java实验报告
实验三 Java基本程序设计(2) 实验时间 2018-9-13 第一部分:理论知识回顾 第一章 再次了解了java“白皮书”的关键术语,java的常见术语,对于大多数“白皮书”的关键术语依然 ...
- CTF_WriteUp_HTTP基本认证（Basic access authentication）
HTTP基本认证 在HTTP中,基本认证(英语:Basic access authentication)是允许http用户代理(如:网页浏览器)在请求时,提供用户名和密码 的一种方式.HTTP基本认证 ...