bootstrap select插件的使用，及其ajax传值插入select的option

首先需要导入bootstrap.css  和 bootstrap.js之后再倒入bootstrap-select.css和bootstrap-select.js：

<link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="js/bootstrap-select/css/bootstrap-select.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-select/js/bootstrap-select.min.js"></script>

导入的路径自行配置,jquery需要注意版本，需要3.0以下，记得貌似看到过这一句，可以先试试，不行就换个版本，，bootstrap-select和bootstrap的版本也容易冲突，这个配置好之后，加载就可以了。

html页面的内容：

  <div class="form-inline">
                                                    <div class="form-group">
                                                            <label for="exampleInputName1" style="margin-left:30px;">省份：</label>
                                                            
                                                            <select id="sheng" name="usertype" class="selectpicker show-tick form-control col-sm-1 select-sheng-width"  data-live-search="true">
                                                            
                                                            </select>
                                                            <butten class="btn btn-primary btn-add">添加</butten>
                                                            <butten class="btn btn-primary btn-delete">删除</butten>
                                                    </div>
                                                    <div class="form-group">
                                                            <label for="exampleInputName2" style="margin-left:20px;">城市：</label>
                                                            
                                                            <select id="school" name="usertype" class="selectpicker show-tick form-control col-sm-1 select-school-width"  data-live-search="true">
                                                            
                                                            </select>
                                                            <butten class="btn btn-primary btn-add">添加</butten>
                                                            <butten class="btn btn-primary btn-delete">删除</butten>
                                                    </div>
                                                    <div class="form-group">
                                                            <label for="exampleInputName3" style="margin-left:20px;">学校：</label>
                                                            
                                                            <select id="testName" name="usertype" class="selectpicker show-tick form-control col-sm-1 select-school-width"  data-live-search="true">
                                                                
                                                            </select>
                                                            <butten class="btn btn-primary btn-add">添加</butten>
                                                            <butten class="btn btn-primary btn-delete">删除</butten>
                                                    </div>
                                            </div>

js里面的内容：

$(function() {
    $("#sheng").selectpicker({
        noneSelectedText: '全部',
        countSelectedText: function(){}
    });

$.ajax({
                url:'selectProvince',
                dataType:'json',
                type:'post',
                success:function(data){
                        $.each(data, function (i, n) {
                            $("#sheng").append(" <option value='"+n.id+"'>" + n.name + "</option>");
                            
                        })
                         //缺一不可,
                        $("#sheng").selectpicker('refresh');
                        $('#sheng').selectpicker('render'); 
                }
            
            });

 

})

 

 $("#sheng").selectpicker('refresh');
  $('#sheng').selectpicker('render'); 这两个非常重要而且需要放在success:function里面。之前我就是没加这个和放错位子调试了很久。