基于JQurey的省市区的三级联动查询

灰太狼 2021-01-21 01:52 670阅读 0赞

组长给我一个任务，让我写一个基于省市区的三级联动查询，记录一下

html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html >
      <head>
        <title>级联查询</title>
    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="bootstrap.min.css" />    
      </head>  
    <body > 
    <h3>下拉框示例</h3>         
    <div class="form-group">
                    <div class="col-sm-2 text-center">
                       省
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="Province" id="Province">
                            <option> 请选择 </option>
                        </select>
    
    
                    </div>
                    <div class="col-sm-2 text-center">
                       市
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="City" id="City">
                            <option> 请选择 </option>
                        </select>
                    </div>
                    <div class="col-sm-2 text-center">
                    县/区
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="Village" id="Village">
                            <option> 请选择 </option>
                        </select>
                    </div>
                </div>
    			 <script src="jquery-2.0.3.min.js"></script>
    			 <script src="1.js"></script>
    </body>
      
    </html>

$(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/baseArea/getProvince",
            success:function(data){
    
                $.each(data.obj,function(i,item){
                    str+="<option value="+item.areaId+">"+item.areaName+"</option>"
                })
                $("#Province").append(str)
            },
            error:function(){alert("Error");}
        })
    
    }
    function CityBind(){
        $("#City").html("");
        var options=$("#Province option:selected");
        var province=options.val();
        console.log(province);
        if(province==""){
            return;
        }
        $("City").html("");
        var str="<option> 请选择 </option>";
    
        $.ajax({
            url:"http://localhost:3101/baseArea/getChild",
            data:{"parentId":province},
            success:function(data){
                $.each(data.obj,function(i,item){
                    str+="<option value="+item.areaId+">"+item.areaName+"</option>";
                })
                $("#City").append(str);
            },
            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/baseArea/getChild",
            data:{"parentId":city},
            success:function(data){
                $.each(data.obj,function(i,item){
                    str+="<option value="+item.areaId+">"+item.areaName+"</option>";
                })
                $("#Village").append(str);
            },
            error:function(){alert("Error");}
    
        });
    }

最终效果

![70][]

[70]: /images/1611193910841.png