bootstrap selectpicker 下拉框使用详解

2021/4/22 18:29:39

编程Tag： js bootstrap select 下拉框 append min selectpicker

本文主要是介绍bootstrap selectpicker 下拉框使用详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

最近一直在用bootstrap 的一些东西，写几篇博客记录下。。。。

bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件，先看效果如下：

附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. （官方示例好像出问题了，最近一直看不到）

下拉框的使用上基本操作一般是：单选、多选、模糊搜索、动态赋值等，下面来看如何使用：

1、首先需要引入的css和js：

bootstrap.css

bootstrap-select.min.css

jquery-1.11.3.min.js

bootstrap.min.js

bootstrap-select.min.js

2、js代码如下：

5、附上我的源码，下拉数据通过ajax从后台获取：

https://blog.csdn.net/lu92649264/article/details/82788077

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="pkgs/jquery-2.1.1.min.js"></script>
  <script src="pkgs/bootstrap-select.min.js"></script>
  <script src="pkgs/bootstrap.min.js"></script>
  <link rel="stylesheet" href="pkgs/bootstrap-select.css">
  <link rel="stylesheet" href="pkgs/bootstrap.min.css">
</head>

<body>
  <select name="" id="slpk" class="selectpicker" data-live-search="true" multiple></select>

  <script>
    $(function () {
      $(".selectpicker").selectpicker({
        noneSelectedText: "请选择"
      });
      var select = $("#slpk");
      select.append("<option value='1'>香蕉</option>");
      select.append("<option value='2'>苹果</option>");
      select.append("<option value='3'>橘子</option>");
      select.append("<option value='4'>石榴</option>");
      $(window).on("load", function(){
        $(".selectpicker").selectpicker("val", "")
        $(".selectpicker").selectpicker("refresh");
      })
      var selectedValues = [];
      $("#slpk:selected").each(function(){
        selectedValues.push($(this).val());
      });
      console.log(selectedValues);
    })
  </script>
</body>

</html>

这篇关于bootstrap selectpicker 下拉框使用详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

bootstrap selectpicker 下拉框使用详解

相关编程文章