jq四级联动

前端代码:

<div class="tc">
    <div class="aboutBannerBox"></div>
    <div class="aboutCont">

        <div id="address">
            <select id="province" style="min-width: 120px;">
                <option value="">请选择省份</option>
            </select >

        </div>

    </div>
</div>

<script>
    $(function(){

        province();

        //获取到市
        $('#province').change(function(){
            var url = '/order/get_address';
            var code = $(this).val();

            $.ajax({
                url:url,
                type:'post',
                data:{code:code,country:156},
                dataType:'json',
                success:function(data){

                    var city =  '<select id="city" style="min-width: 120px;"> <lect>';
                    if($('#city').length < 1){
                        $('#address').append(city);
                    }
                    var content = '<option>请选择市</option>';

                    var data = data.data;
                    for (var i in data) {
                        content += '<option value='+data[i].code+'>'+data[i].name+'</option>';
                    }
                    $('#city').html(content);

                    area();
                }
            })
        });



        //获取到县/区
        function area(){
            $('#city').change(function(){
                var url = '/order/get_address';
                var code = $(this).val();

                $.ajax({
                    url:url,
                    type:'post',
                    data:{code:code,country:156},
                    dataType:'json',
                    success:function(data){

                        var area =  '<select id="area" style="min-width: 120px;"> <lect>';
                        if($('#area').length < 1){
                            $('#address').append(area);
                        }

                        var content = '<option>县/区</option>';
                        var data = data.data;
                        for (var i in data) {
                            content += '<option value='+data[i].code+'>'+data[i].name+'</option>';
                        }

                        $('#area').html(content);
                        street();
                    }

                })
            });
        }

        function street(){
            //获取到街道
            $('#area').change(function(){

                var url = '/order/get_address';
                var code = $(this).val();

                $.ajax({
                    url:url,
                    type:'post',
                    data:{code:code,country:156},
                    dataType:'json',
                    success:function(data){

                        var street =  '<select id="street" style="min-width: 120px;"> <lect>';
                        if($('#street').length < 1){
                            $('#address').append(street);
                        }

                        var content = '<option>街道</option>';
                        var data = data.data;
                        for (var i in data) {
                            content += '<option value='+data[i].code+'>'+data[i].name+'</option>';
                        }
                        $('#street').html(content);
                    }
                })
            })
        }
    });



    //获取到省份
    function province(){
        var url = '/order/get_address';
        $.ajax({
            url:url,
            type:'post',
            data:{code:0,country:156},
            dataType:'json',
            success:function(data){
                var content = '<option>请选择省份</option>';
                var data = data.data;
                for (var i=0;i<data.length;i++) {
                    content += '<option value='+data[i].code+'>'+data[i].name+'</option>'
                }
                $('#province').html(content);
            }
        })
    }
</script>
您好!要实现HTML省市区三级联动的功能,可以借助jQuery来实现。以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>省市区三级联动</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择地区</option> </select> <script> $(function() { // 获取省份数据并填充下拉框 $.getJSON('province.json', function(data) { var options = '<option value="">请选择省份</option>'; $.each(data, function(index, province) { options += '<option value="' + province.code + '">' + province.name + '</option>'; }); $('#province').html(options); }); // 省份下拉框改变事件 $('#province').change(function() { var provinceCode = $(this).val(); if (provinceCode === '') { $('#city').html('<option value="">请选择城市</option>'); $('#area').html('<option value="">请选择地区</option>'); return; } // 获取城市数据并填充下拉框 $.getJSON('city.json', { provinceCode: provinceCode }, function(data) { var options = '<option value="">请选择城市</option>'; $.each(data, function(index, city) { options += '<option value="' + city.code + '">' + city.name + '</option>'; }); $('#city').html(options); $('#area').html('<option value="">请选择地区</option>'); }); }); // 城市下拉框改变事件 $('#city').change(function() { var cityCode = $(this).val(); if (cityCode === '') { $('#area').html('<option value="">请选择地区</option>'); return; } // 获取地区数据并填充下拉框 $.getJSON('area.json', { cityCode: cityCode }, function(data) { var options = '<option value="">请选择地区</option>'; $.each(data, function(index, area) { options += '<option value="' + area.code + '">' + area.name + '</option>'; }); $('#area').html(options); }); }); }); </script> </body> </html> ``` 在示例代码中,使用了三个`<select>`标签来分别表示省、市和区的下拉框。通过jQuery的`$.getJSON`方法来异步获取省、市、区的数据(以JSON格式存储),并根据选择的省、市来动态更新下一级的选项。 注:需要替换示例中的`province.json`、`city.json`、`area.json`为实际的省、市、区数据文件路径或后端接口地址。 希望对您有所帮助!如有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值