参考来源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的使用方法的更多相关文章

  1. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  2. 手机自动化测试:appium源码分析之bootstrap十五

    手机自动化测试:appium源码分析之bootstrap十五   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  3. Bootstrap <基础二十五>警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  4. 五种I/O 模式,select、epoll方法的理解,BIO、NIO、AIO理解 相关文章

    一.io方式 Linux网络编程 五种I/O 模式及select.epoll方法的理解 web优化必须了解的原理之I/o的五种模型和web的三种工作模式 五种I/O 模式——阻塞(默认IO模式),非阻 ...

  5. Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  6. Bootstrap入门(十五)组件9:面板组件

    Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...

  7. centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课

    centos  lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress  安装phpmyadmin  定时备份mysql两种方法  第二十五节 ...

  8. “全栈2019”Java第九十五章:方法中可以定义静态局部内部类吗?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. “全栈2019”Java第六十五章:接口与默认方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

随机推荐

  1. spring4笔记----报错publicid systemid之间要有空格的解决方法

    <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...

  2. cmd输出控制台传递的参数

    public class Test2{ public static void main(String[] args){ System.out.println(args[0]); System.out. ...

  3. hive笔记:复杂数据类型-array结构

    array 结构 (1)语法:array(val1,val2,val3,…)  操作类型:array array类型的数据可以通过'数组名[index]'的方式访问,index从0开始: (2)建表: ...

  4. [TC]Total Command显示文件夹大小

    在Windows下计算文件夹的大小 按下 Alt +Shift +Enter 将会计算当前目录下的文件夹大小. 关于TC相关的知识:TC(Total Commander)文件管理神器

  5. sed:-e 表达式 #1,字符 10:未终止的“s”命令

    执行shell脚本时,使用sed变量替换指定的字符串,一直出现这个错误: [root@bqh-118 scripts]# vim while_rz.sh [root@bqh-118 scripts]# ...

  6. 4.9Python数据处理篇之Matplotlib系列(九)---子图分布

    目录 目录 前言 (一)subplot()方法 ==1.语法说明== ==2.源代码== ==3.输出效果== (二)subplot2grid方法 ==1.语法说明== ==2.源代码== ==3.展 ...

  7. 1.tushare模块的应用

    tushare模块的应用 今日概要 TuShare简介和环境安装 TuShare的应用 今日详情 一.TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其 ...

  8. python 基本模块 random、os、sys

    一.random模块 所有关于随机相关的内容都在random模块中 import random print(random.random()) # 0-1⼩数 print(random.uniform( ...

  9. Linux 简介(day1)

    一.Linux 诞生于1991年 二.创始人:林纳斯.托瓦茨(Linus Torvalds) 三.logo:企鹅 四.Linux完整系统包括 1.Linux kernel (Linux 内核) 2.f ...

  10. 【Teradata】tdlocaledef修改默认日期配置

    如下所有操作需要使用root登录到TD数据库节点操作 1.获取数据库当前默认配置 //使用root登录TD数据库节点 cd /opt/teradata/tdat/tdbms/xx.xx.xx.xx/b ...