十五、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第 ...
随机推荐
- BurpSuit添加CA证书拦截HTTPS通信
问题 BurpSuit 安装成功后可以直接使用代理对使用 HTTP 协议通信的会话进行拦截,但是对于使用 HTTPS 协议通信的会话进行代理使用时就会出现如下画面 例如访问百度主页: 原因 HTTPS ...
- Sqlserver还原master
net stop mssqlserver net start mssqlserver /m"SQLCMD" sqlcmd -s xx sqlcmd -s xx -U sa -P x ...
- Python PEP-8编码风格指南中文版
#PEP 8 – Python编码风格指南 PEP: 8 Title: Style Guide for Python Code Author: Guido van Rossum , Barry War ...
- foreach Transform 同时chils.setParent引起的bug
Transform继承自IEnumerable,可以对它进行迭代.但当你在迭代的同时,又对child进行setParent操作时,会出现意想不到的结果. 下面是我使用foreach和getchild得 ...
- 关于java中assert(断言)的使用讲解
说明:写的不是很全面,有任何问题请留言,多交流,谢谢! 1.eclipse.myeclipse开启assert(断言),默认是关闭,如下: 说白了就是设置一下jvm的参数,参数是-ea或者-enabl ...
- Google开源GSON的使用
* 谷歌开原项目GitHub地址:https://github.com/google/gson 1.新建一个maven项目,引入gson的dependency坐标依赖以及commons-io的坐标: ...
- GitHub-分支管理02-BUG与Feature分支
参考博文:廖雪峰Git教程 1. Bug分支 软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并 ...
- elixir mix 简介
概述 mix 是 elixir 工程的构建工具,利用 mix,可以快速方便的创建 elixir 工程,写单元测试,管理 elixir 包的依赖管理等等. 我觉得刚开始学习 elixir 的时候,先简单 ...
- Emacs中多个golang项目的配置方法
概述 最近使用golang开发项目时, 发现有时需要同时进行多个golang项目. 在这种情况下, 如果把所有的项目都放在 GOPATH 之下, 不仅管理麻烦(因为各个项目需要提交到不同的代码库), ...
- JQuery Plugin 开发
学习 JQuery 插件开发之后, 可以将自己平时常用的功能封装成插件, 便于在不同的项目之间使用. JQuery 官网上的 插件开发教程就很不错, 简单易懂. 参考网址: http://learn. ...