bootstrap select下拉搜索插件使用方法详解


Posted in Javascript onNovember 23, 2017

bootstrap-select是boot的下拉搜索插件,使用的时候有时我们需要动态从后台 或者 直接加载动态数据。
下面是根据一级下拉菜单,动态加载二级联动方式。(不是ajax后台获取)

首先引入js与css文件(一个css两个js)

<link rel="stylesheet" href="css/bootstrap-select.css" rel="external nofollow" >

js省略

一、下拉搜索(html)

<select class="selectpicker" data-live-search="true" id="d1">
  <option value="-1">请选择</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select class="selectpicker" data-live-search="true" id="d2">
  <option value="-1">请选择</option>
</select>

二、加载数据 二级联动(js)

function smallScreen(){   // 个人项目中间距处理,可以省略
  if($(window).width()<768){
    $('.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn)').css({
      'width':'100%',
      'margin-top':'10px'
    });
  }
}
$(function(){
var erji=[
    ['海淀区','东城区','西城区'], // 0
    ['浦东区','金山区','黄埔区'], // 1
    ['台州市','杭州市','宁波市','嘉兴市'], // 2
    ['郑州市','洛阳市','开封市'] // 3
  ];
  var yuan = '<li data-original-index="-1" class>' +   // 字符串拼接
      '<a tabindex="0" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">' +
      '<span class="text">请选择</span>' +
      '<span class="glyphicon glyphicon-ok check-mark"></span>' +
      '</a>' +
      '</li>';
  $('#d1').change(function(){  // 一级下拉菜单选项改变事件
    if($(this).val() === '-1'){
      $('#d2').prev('div.dropdown-menu').find('ul').html(yuan);
      $('#d2').html('<option>请选择</option>');
      $('.selectpicker').selectpicker('refresh');
      smallScreen();
      return;
    }
    var cityIndex = erji[ this.value ]; // 当前下标在二级对应内容
    var html = '<li data-original-index="-1" class>' +   // 下拉搜索动态加载成的标签
        '<a tabindex="0" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">' +
        '<span class="text">请选择</span>' +
        '<span class="glyphicon glyphicon-ok check-mark"></span>' +
        '</a>' +
        '</li>';
    var erjiOption = '<option value="0">请选择</option>';  // 同事添加option
    for(var i = 0;i<cityIndex.length;i++){
      html+= '<li data-original-index='+i+'>' +
          '<a tabindex="0" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">' +
          '<span class="text">'+cityIndex[i]+'</span>' +
          '<span class="glyphicon glyphicon-ok check-mark"></span>' +
          '</a>' +
          '</li>';  // 此处为了兼容ie,采用的字符串拼接而不是ES6的模板字符串。
      // 添加option
      erjiOption += '<option value='+i+'>'+cityIndex[i]+'</option>';
    }
    $('#d2').prev('div.dropdown-menu').find('ul').html(html);
    $('#d2').html(erjiOption);
    $('.selectpicker').selectpicker('refresh');
    smallScreen();
  });
});
});

个人使用有效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
微信小程序用户授权最佳实践指南
May 08 Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
sublime text配置node.js调试(图文教程)
Nov 23 #Javascript
Vue代码分割懒加载的实现方法
Nov 23 #Javascript
初探js和简单隐藏效果的实例
Nov 23 #Javascript
详解如何在angular2中获取节点
Nov 23 #Javascript
You might like
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
Python中replace方法实例分析
2014/08/20 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python框架django项目部署相关知识详解
2019/11/04 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
会话Bean的种类
2013/11/07 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
新教师岗前培训方案
2014/06/05 职场文书
倡导文明标语
2014/06/16 职场文书
篮球社团活动总结
2014/06/27 职场文书
防灾减灾活动总结
2014/08/30 职场文书
老乡会致辞
2015/07/28 职场文书
如何用python反转图片,视频
2021/04/24 Python