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>