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 ...
随机推荐
- pytorch里一些函数的说明记录
THLongStorage *THTensor_(newSizeOf)(THTensor *self); THLongStorage *THTensor_(newStrideOf)(THTensor ...
- ILspy不能查看VS代码问题
1.问题情况 刚接触IL,发现从网上下载的IL无法反编译 dll和exe文件都不行 出现如下提示: System.OutOfMemoryException: 数组维度超过了支持的范围. 2.解决方法 ...
- Spring Boot + LayUI 批量修改数据 数据包含着对象
页面展示 HTML 代码 <blockquote class="layui-elem-quote demoTable"> <div class="lay ...
- python编写“求最大值”
# 求最大值 def large(*num): # 定义一个large函数,函数的参数为可变参数 ma = num[0] # 初始化最大值 for n in num: if ma < n: # ...
- vscode 配置c++记录
c_cpp_properties.json { "configurations": [ { "name": "MinGW", "i ...
- 毕业设计——基于ZigBee的智能窗户控制系统的设计与实现
题目:基于物联网的智能窗户控制系统的设计与实现 应用场景:突降大雨,家里没有关窗而进水:家中燃气泄漏,不能及时通风,威胁人身安全,存在火灾的隐患:家中窗户没关,让坏人有机可乘.长时间呆在人多.封闭的空 ...
- 【i春秋综合渗透测试】《我很简单，请不要欺负我》
第2题:获取目标网站管理员的密码 扫到了后台(/admin),本来想用sqlmap跑一下,但是随便试了个弱口令(admin888)就进去了... 第3题: getshell 配置插马:登录后台 ...
- 动态规划-LCS-Uncrossed Lines
2020-02-11 21:14:18 问题描述: 问题求解: 本质就是LCS. public int maxUncrossedLines(int[] A, int[] B) { int len1 = ...
- 模型压缩一半，精度几乎无损，TensorFlow推出半精度浮点量化工具包，还有在线Demo...
近日,TensorFlow模型优化工具包又添一员大将,训练后的半精度浮点量化(float16 quantization)工具. 有了它,就能在几乎不损失模型精度的情况下,将模型压缩至一半大小,还能改善 ...
- coding++：java-自定义签名+拦截器
本次案例工具为:SpringBoot <version>1.5.19.RELEASE</version> Code: 1.annotations package com.m ...