BootStrap-select用例（省市区三级查询带模糊搜索功能）

小灰灰 2021-01-21 01:58 1279阅读 0赞

前面 我曾经写过两篇博客，一篇是用JQquery实现省市区三级查询，一篇是用基于bootstrap的H+自带的一个自动补全模糊查询，今天又发现了一个新的插件挺好用的是把前面的两个功能整合了起来，是bootstrap的一个插件，bootstrap-select

bootstrap-select开源地址：[https://github.com/silviomoreto/bootstrap-select][https_github.com_silviomoreto_bootstrap-select]

下面主要基于我的一篇博客写一个例子

html文件

<!DOCTYPE html>
    <html >
      <head>
        <title>下拉列表</title>
    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="dist/css/bootstrap-select.css">
      </head>  
    <body > 
    <h3>示例</h3>  
    <div class="form-group">
                    <div class="col-sm-2 text-center">
                       省
                    </div>
                    <div class="col-sm-2">
                        <select class="selectpicker" data-live-search="true" name="Province" id="Province">
                            <option> 请选择 </option>
                        </select>
    
    
                    </div>
                    <div class="col-sm-2 text-center">
                       市
                    </div>
                    <div class="col-sm-2">
                        <select  class="selectpicker" data-live-search="true" name="City" id="City">
                            <option> 请选择 </option>
                        </select>
                    </div>
                    <div class="col-sm-2 text-center">
                    县/区
                    </div>
                    <div class="col-sm-2">
                        <select  class="selectpicker" data-live-search="true" name="Village" id="Village">
                            <option> 请选择 </option>
                        </select>
                    </div>
                </div>       
      <script src="jquery.min.js"></script>
      <script src="bootstrap.min.js"></script>
      <script src="1.js"></script>
      <script src="dist/js/bootstrap-select.js"></script>
       
    </body>
      
    </html>

注意几点，首先必须是h5页面，判断依据就是最上面的那个<!DOCTYPE html>，如果不是h5，有些样式会出不来

![70][]

然后是js的版本，根据官方说名，jquery必须是1.9.1及以上，bootstrap的版本必须是3.3.7以上的编译版本，如果是4以上的需要添加popper.js,后面我会给出demo的下载链接，你可以从里面直接用我的js和css文件

因为是数据是动态生成的，所以自己要写一个js

$(function(){
    
        ProvinceBind();
    
        $("#Province").change(function(){
            CityBind();
        })
        $("#City").change(function(){
            VillageBind();
        })
    })
    function Bind(str){
        alert(("#Province").html());
        $("#ProviceBind").val(str);
    }
    function ProvinceBind(){
        $("#Province").html("");
        var str="<option> 请选择 </option>";
        $.ajax({
            url:"http://localhost:3101/getProvince",
            success:function(data){
    
                $.each(data.obj,function(i,item){
                    str+="<option value="+item.areaId+">"+item.areaName+"</option>"
                })
                $("#Province").append(str)
                $('#Province').selectpicker('refresh');
                $('#Province').selectpicker('render');
            },
            error:function(){alert("Error");}
        })
    
    }
    function CityBind(){
    	$("#City").html("");
        var options=$("#Province option:selected");
        var province=options.val();
        if(province==""){
            return;
        }
        $("City").html("");
        var str="<option> 请选择 </option>";
    
        $.ajax({
            url:"http://localhost:3101/getChild",
            data:{"parentId":province},
            success:function(data){
                $.each(data.obj,function(i,item){
                    str+="<option value="+item.areaId+">"+item.areaName+"</option>";
                })
                $("#City").append(str);
                $('#City').selectpicker('refresh');
                $('#City').selectpicker('render');
            },
            error:function(){alert("Error");}
    
        });
    }
    function VillageBind(){
    	$("Village").html("");
        var options=$("#City option:selected");
        var city=options.val();
        if(city==""){
            return;
    
        }
        $("#Village").html("");
        var str="<option> 请选择 </option>";
        $.ajax({
            url:"http://localhost:3101/getChild",
            data:{"parentId":city},
            success:function(data){
                $.each(data.obj,function(i,item){
                    str+="<option value="+item.areaId+">"+item.areaName+"</option>";
                })
                $("#Village").append(str);
                $("#Village").append(str);
                $('#Village').selectpicker('refresh');
                $('#Village').selectpicker('render');
            },
            error:function(){alert("Error");}
    
        });
    }

这个其实是对我上篇博客做了简单的修改，但是很重要就是这两句

$('\#Province').selectpicker('refresh');  
 $('\#Province').selectpicker('render');

没有这两句，js就会失效，我个人理解是你动态生成了<option>但是需要重新给它绑定js事件

[https_github.com_silviomoreto_bootstrap-select]: https://github.com/silviomoreto/bootstrap-select
[70]: /images/1611194303995.png