十五、bootstrap-select的使用方法
参考来源https://www.cnblogs.com/nianyifenzhizuo/p/8119462.html
需要的css和js
<link rel="stylesheet" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
html中的代码:
title为默认显示的内容
<select class="selectpicker" multiple data-live-search="true" id="apply">'</select>
以下两句话必不可少
$("对象").selectpicker("refresh");
$(".selectpicker").selectpicker("refresh");
$(".selectpicker").selectpicker("render");
选中事件(每点击一个会自动将value的值放入数组中)
选中的value的值
$(".selectpicker").on('changed.bs.select',function(e){ //选中的value值,会自动添加到数组中
var induAll = $(this).val(); //数组
indusJson = JSON.stringify(induAll);//转换成json格式的字符串
console.log(indusJson)
console.log(typeof indusJson) });
默认选中赋值
$("对象").selectpicker('val',applySelect);
applySelect是数组[1,2,3]
案例
HTML部分代码
+'<div class="mui-input-row real-label">'
+'<label>行业</label>'
+'<select class="selectpicker" multiple data-live-search="true" id="industry">'
+'</select>'
+'</div>'
+'<div class="mui-input-row real-label">'
+'<label>应用</label>'
+'<select class="selectpicker" multiple data-live-search="true" id="apply">'
+'</select>'
+'</div>';
JS部分
//行业
var indusJson = '';
var induAll = '';
function changeIndu() {
$.ajax({
url: 'http://ezist.cn/api/industries',
type: 'get',
dataType: "json",
data: '',
success: function(data) {
console.log(data);
var datas = data.data;
var html = '';
$.each(datas,function(index,item) {
html += '<option value="'+item.id+'">'+item.name+'</option>';
});
$('#industry').html(html);
$("#industry").selectpicker("refresh");
$("#industry").selectpicker("render");
$('#industry').on('changed.bs.select',function(e){
//选中的value值,会自动添加到数组中
induAll = $(this).val();
//转换成json格式的字符串
indusJson = JSON.stringify(induAll);
//当修改资料不在点击的时候数组里面就没有值了,将值存到缓存中
window.localStorage.setItem('Indu',indusJson);
});
//设置默认的选中项,InduSelect是数组[0,1,2]
$("#industry").selectpicker('val',InduSelect);
},
error: function () {
console.log("数据请求失败");
}
})
} //应用
var appliesJson = '';
function changeApp() {
$.ajax({
url: 'http://ezist.cn/api/applies',
type: 'get',
dataType: "json",
data: '',
success: function(data) {
var datas = data.data
var html = '';
// html = '<option value="'+ paramAppIndex +'">'+ paramAppVal +'</option>'
$.each(datas, function(index,item) {
html += '<option value="'+item.id+'">'+item.name+'</option>';
});
$('#apply').append(html);
$("#apply").selectpicker("refresh");
$("#apply").selectpicker("render");
$('#apply').on('changed.bs.select',function(e){
//选中的value值,会自动添加到数组中
var appliesAll = $(this).val();
//转换成json格式的字符串
appliesJson = JSON.stringify(appliesAll);
//当修改资料不在点击的时候数组里面就没有值了,将值存到缓存中
window.localStorage.setItem('Appl',appliesJson);
});
$("#apply").selectpicker('val',applySelect);
},
error: function () {
console.log("数据请求失败");
}
})
}
十五、bootstrap-select的使用方法的更多相关文章
- Bootstrap<基础十五> 输入框组
Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...
- 手机自动化测试:appium源码分析之bootstrap十五
手机自动化测试:appium源码分析之bootstrap十五 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...
- Bootstrap <基础二十五>警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- 五种I/O 模式,select、epoll方法的理解,BIO、NIO、AIO理解 相关文章
一.io方式 Linux网络编程 五种I/O 模式及select.epoll方法的理解 web优化必须了解的原理之I/o的五种模型和web的三种工作模式 五种I/O 模式——阻塞(默认IO模式),非阻 ...
- Bootstrap入门(二十五)JS插件2:过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...
- Bootstrap入门(十五)组件9:面板组件
Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...
- centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课
centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节 ...
- “全栈2019”Java第九十五章:方法中可以定义静态局部内部类吗?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第六十五章:接口与默认方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
随机推荐
- java----java集合框架图
- SQL Server 2016新特性: 对JSON的支持
SQL Server 2005开始支持XML数据类型,提供原生的XML数据类型.XML索引及各种管理或输出XML格式的函数.随着JSON的流行,SQL Server2016开始支持JSON数据类 ...
- Python介绍及环境搭建
摘自http://www.cnblogs.com/sanzangTst/p/7278337.html Python零基础学习系列之二--Python介绍及环境搭建 1-1.Python简介: Py ...
- python数据类型分类以及运算类型
一.python数据类型 目录: 1.数字(整数.小数) 2.字符串(单引号.双引号.三引号) 3.元组 #元素确定之后不能修改 4.列表 #元素可以修改 5.集合 #不讲顺序,得到的结果没有重复元 ...
- sed:-e 表达式 #1,字符 10:未终止的“s”命令
执行shell脚本时,使用sed变量替换指定的字符串,一直出现这个错误: [root@bqh-118 scripts]# vim while_rz.sh [root@bqh-118 scripts]# ...
- 关于phpstorm ftp目录乱码
关于IIS FTP服务器汉字文件目录乱码问题:一般来说,IIS 服务器编码默认为GBK,而你的目录可能是UTF-8,将phpstorm的远程连接设置为GBK就OK了.记住服务器的编码,文件的编码要统一
- Go学习笔记08-包
Go学习笔记08-包 Go语言 封装 包 封装 CamelCase命名规则 首字母大写:public 首字母小写:private 包 一个目录即一个包 main包为可执行入口,只能有一个main包 为 ...
- 高可用,完全分布式Hadoop集群HDFS和MapReduce安装配置指南
原文:http://my.oschina.net/wstone/blog/365010#OSC_h3_13 (WJW)高可用,完全分布式Hadoop集群HDFS和MapReduce安装配置指南 [X] ...
- call和apply;this;闭包
对于这两个原生JS的方法,一直有点绕不过来,朦朦胧胧的感觉.现在详细梳理一下: 两者是基于继承的思想, obj.call(thisObj, arg1, arg2, ...); obj.apply(th ...
- redis学习笔记(一)-安装
检查是否有redis yum 源 yum install redis 下载fedora的epel仓库 yum install epel-release 安装redis数据库 yum install r ...