jQuery插件-搜索下拉框bootstrap-select-蒲公英云

jQuery插件-搜索下拉框bootstrap-select

朱雀 2023-03-02 13:10 68阅读 0赞

我主要是使用 bootstrap-select 插件的搜索下拉框的功能
先看看效果
在这里插入图片描述

使用示例

1.引入样式表

<link type="text/css" rel="stylesheet" href="lib/bootstrap.css">
  <link type="text/css" rel="stylesheet" href="css/bootstrap-select.min.css" />
  <script src="lib/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
  <script src="lib/bootstrap-select.js"></script>
  <script src="lib/defaults-zh_CN.js"></script>

最后一个文件 defaults-zh_CN.js 非必需，是组件中文化的时候需要引用
2.HTML

<div class="form-group form-group-input" id="select_orgin">
     <select class="selectpicker" id="login_orgin" data-live-search="true">
         <option value="" >请选择学校</option>
     </select>
 </div>

使用 ajax 动态获取数据

function getorgin() { 
      $("#select_orgin").show();
      var url = baseurl + "login/getOrganeSchool.do";
      var params = { 
          param: ''
      };
      $.ajax({ 
        url: url,
        type: 'post',
        data: JSON.stringify(params),
        traditional: true,
        cache: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) { 
          var data = data.data;
          if (data) { 
              for (var i = 0; i < data.length; i++) { 
                var options = "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                $("#login_orgin.selectpicker").append(options);
                $("#login_orgin").selectpicker('refresh');
              }
          }
        },
        error: function (error) { 
        }
      })
    }