bootstrap-select使用过程中的一些问题入门百科_bootstrap基础入门

这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子。地址:官方插件地址:https://developer.snapappointments.com/bootstrap-selectGitHub地址:https://github.com/snapappo

bootstrap-select使用过程中的一些问题入门百科

这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子。

bootstrap-select使用过程中的一些问题入门百科_bootstrap基础入门

地址:

 

问题一:点击没有反应,下拉框不出现

原因:可能是js文件引入顺序错误。

正确引入顺序:

<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-select/js/bootstrap-select.js"></script>

问题二:如何加载动态数据

方法一:

$.get("/test/ajax", function(result){
    if(result.code == 0){
        var addhtml = "";
        for (var i = 0; i < result.data.length; i++){
            addhtml += "<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>";
        }
        $('.selectpicker').html(addhtml);
    }
});

方法二:

//使用refresh方法更新UI以匹配新状态
$('.selectpicker').selectpicker('refresh');
//render方法强制重新渲染引导程序
$('.selectpicker').selectpicker('render');$.get("/test/ajax", function(result){
    if(result.code == 0){
        for (var i = 0; i < result.data.length; i++){
            $('.selectpicker').append("<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>");
        }
    }
});

问题三:动态加载数据不显示

原因:动态生成数据后没有刷新插件

解决办法:数据加载成功后加入以下两条语句。

//使用refresh方法更新UI以匹配新状态
$('.selectpicker').selectpicker('refresh');
//render方法强制重新渲染引导程序
$('.selectpicker').selectpicker('render');

问题四:使用筛选时,如果同时出现中文和英文,则搜索会出现问题

解决办法:

注释bootstrap-select.js文件中的以下代码:

that.$lis.not('.hidden, .divider, .dropdown-header').eq(0).addClass('active').children('a').focus();
$(this).focus();
海计划公众号
(0)
上一篇 2020/03/30 07:14
下一篇 2020/03/30 07:14

您可能感兴趣的内容

  • Vue.js 如何使用 Socket.IO使用攻略_socket基础入门

    在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。1、什么是 Socket.IO?Socket.IO是一个WebSocket

    2020/03/26
  • 米艺字攻略教程_免费艺术字体在线生成器

    米艺字攻略教程 官方网址:http://www.miyizi.com/ 简介描述:免费艺术字体在线生成器 一个在线艺术字工具网站,有趣的同时,还是比较实用的。选择某个你喜欢的字体后…

    2020/03/10
  • preactjs菜鸟教程React 的 3kb 轻量化方案

    preactjs基础入门 官方网址:https://preactjs.com/ GitHub:https://github.com/developit/preact/ 简介描述:R…

    2020/03/05
  • 从.env文件中为Node.js加载环境变量入门攻略_变量基础知识

    使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。存储环境变量的一种方法是将它们放在 .env 文件中。这些文件允许你指定各种环境变量及其相应的值。在大多数情况下,你不希望将 .env 文件添加到源代码控制中(即Git)。因此,应该将它的文件名添加到 .gitignore 文件中,以

    2020/03/29
  • nodejs支持高并发吗?小白知识_高并发入门知识

    nodejs是支持高并发的。那么为什么单线程的nodejs可以高并发?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。nodejs支持高并发的原因:nodejs是非阻塞异步操作。针对每个并发请求,服务端给请求注册一个激发事件(I/O),并给一个回调函数(这个过程没有阻塞新的连接请求)。按顺序执行事件处理(I/O),处理完成后执行回调函数,接着执行下一个事

    2020/03/24
  • barnimages基础教程_提供免费高清晰度图片集合的站点

    barnimages基础教程 官方网址:https://barnimages.com/ 简介描述:提供免费高清晰度图片集合的站点 谷仓图片(BarnImages)网站是一个提供免费…

    2020/03/06
  • txt.wav入门基础_一款可以实现波浪文字动画的纯JS插件

    txt.wav入门基础 官方网址:http://www.stilllife.studio/txtwav GitHub:https://github.com/still-life-s…

    2020/03/10
  • 为什么要用TypeScript?教程视频_TypeScript小白知识

    TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序。另外它还提供了一些语法来帮助大家更方便地实践面向对象的编程。那先来看看TypeScript是如何解决这两个问题的。一. 编译时的强类型TypeScript设计了一套类型机制来保证编译时的强类型判断。最简单的,你可以申明变量的类型,

    2020/03/22
  • Video Renderer:高性能移动 Web 端视频编辑器菜鸟攻略_视频入门攻略

    Video Renderer 是一款针对移动 Web 应用开发的高性能视频编辑器。在 2019 伦敦全栈工程师大会( Fullstack London 2019 conference )上, Threads Styling 公司的软件开发工程师Forbes Lindesay 分享了 Video Renderer 的开发经验。Canvas API 支持在浏览器

    2020/03/26
  • Js实现HSL&RGB互转入门基础_颜色小白知识

    RGB和HSL(也叫HSB/HSV)是两种色彩空间,即:红,绿,蓝(Red,Green,Blue)和色调,饱和度,亮度(Hue,Saturation,Lightness或Brightness或Value),前者适用于机器采样,目前的显示器颜色即由这三种基色构成,而后者更符合人类的直观感觉,比如人一般表达一个颜色会这样说:有点浓的暗红色。而不会说红色占多少,绿

    2020/03/22
  • CSS Module基础入门_模块小白指南

    CSS Module产生背景在软件工程里面模块指的是可组合、分解和更换的单元。下面是一张css树,项目里面总的css文件是由一系列小的单元组成,比如下面的reset.css就是一个单元。模块化的概念不光在css里面,在JS里面也是同样适用的,我们把代码按照一定的规则和逻辑拆分,分解成可组合可更换的单元,这样就实现了一个最大限度的代码复用。在css中,代码复用

    2020/03/29
  • 用webpack发布一个vue插件包入门基础_插件菜鸟教程下载

    创建库本来以为很简单,结果配置了webpack之后,运行build就报错了,似乎不认识es6语法,于是先后安装了几个包:@babel/core@babel/preset-env@babel-loader@babel/plugin-proposal-class-properties进行了一些配置:// babel
    const presets = [[‘@bab

    2020/03/24
  • 如何使用webpack打包一个库library?使用指南_库使用说明

    日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!!初始化库mkdir library
    cd library
    npm init -y经过以上步骤后会生成一个library文件夹,里面包含一个package.json文件。然后简单修改为如下所示:{“name”: “library”,”version”: “1.0.0”,”de

    2020/03/20
  • js中cookie操作总结:cookie设置,读取,删除,判断是否存在小白指南_存储基础指南

    这篇文章将简单介绍通过Js对cookie的相关操作,网上也有很多类似或者重复的文章了。cookie基础操作知识,这里在一次总结一下。Cookie的解释有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密) 设置cookiesetCookie:function(name,valu

    2020/03/26
  • qs.js使用教程更好的处理url参数_url菜鸟指南

    第一次接触qs这个库,是在使用axios时,用于给post方法编码,在使用过程中,接触到了一些不同的用法,写在这里分享一下。qs.parseqs.parse方法可以把一段格式化的字符串转换为对象格式,比如let url = ‘http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e’;
    let data = qs.

    2020/04/05
  • Vue.js动画笔记菜鸟指南vue实现动画效果_动画使用帮助

    1、Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css 3、在构子函数中操作DOM 4、使用第三方Js动画库如:Velocity.js 2、Vue.js官方提供了默认的动画组件 transition ,例子:<button @click

    2020/04/03