bootstrap-select 下拉框控件

版权声明：Myfour的个人笔记 转载请声明来源 https://blog.csdn.net/sinat_36663351/article/details/83586133

1. 其是bootstrap下的控件，所以要引入bootstrap相关css与js以及jquery，并引入自己的

<link rel="stylesheet" href="{% static 'yd/bootstrap-select.min.css' %}">
<script src="{% static 'yd/bootstrap-select.min.js' %}"></script>
<script src="{% static 'yd/defaults-zh_CN.min.js' %}"></script>  <!-- 汉化该插件用，引入即可汉化 -->

2. 简单的应用，只需在select标签中引入相应的类名

<select class="selectpicker">
        <option>mustard</option>
        <option>benz</option>
        <option>masarity</option>
</select>

3. 使该下拉框具有即时搜索功能,添加data-live-search属性为true即可

<select class="selectpicker" data-live-search='true'>
        <option data-tokens="ketchup mustard">mustard</option>
        <option>benz</option>
        <option>masarity</option>
</select>

4.为下拉框设置一些参数

<script type="text/javascript">
    $('.selectpicker').selectpicker({
        style: 'btn-primary',
        size: 10, //该参数控制下拉框能显示的数量，需要滚动才能看别的
    });
</script>

5.如果我们想要通过ajax动态的为select控件添加选项，操作如下；重点在于最后的刷新控件，若不刷新控件你的append的内容无法更新显示到select控件中。

$(function(){
        $.ajax({
            type:"GET",
            url:"{% url 'yd:getproselect' %}",
            success:function(data){
                $.each(data['opts'],function(i,item){
                    $("#proselect").append("<option value='"+item+"'>"+item+"</option>")
                });
                $('#proselect').selectpicker('refresh');  
                //$('#proselect').selectpicker('render');  
            },
        });
    });

6.取的该控件的值

var value = $('#id').selectpicker('val')

7.为该控件设置初始值

$('#id').selectpicker('val',initialValue)

8.使用data-width属性设置下拉框的大小自适应:auto,fit等，auto根据最长选项控制大小，fit根据所选项大小决定

<select class="selectpicker" data-width="auto">
  ...
</select>