省市区联动代码

最新推荐文章于 2021-10-09 23:53:06 发布

Alan_阿兰

最新推荐文章于 2021-10-09 23:53:06 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏：场景管理

本文链接：https://blog.youkuaiyun.com/sixteen_cicle/article/details/54861391

场景管理专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个基于jQuery实现的省市区三级联动选择器的详细代码。该选择器可根据上一级的选择动态更新下一级的选项，并能根据已有的省市区信息进行初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
联动选择函数
curdom,
placeName

*/
function setSelect(curdom,placeName){
        curdom.empty();
        for(var i= 0;i<placeName.length;i++){
            var $option = $("<option value='"+placeName[i].value+"'>"+placeName[i].name+"</option>");
            curdom.append($option);
        }
    }
/*
联动框
*/
var $tr = $('<tr><td><div class="ui-label"><span class="redText">* </span>商户地址: </div><div class="ui-inputWrap"><select id="address-province" name="address-province" class="infolink" required="required"></select><select id="address-city" name="address-city" class="infolink" required="required"></select><select id="address-area" name="address-area" class="infolink" required="required"></select></div></td></tr>');
$('tr:eq(6)').after($tr);
(function(){
    //下拉框选项复制
    setSelect($("#address-province"),placeName);
    setSelect($("#address-city"),placeName[0].sub);
    setSelect($("#address-area"),placeName[0].sub[0].sub);
    var provinceval= dataInfo.getDom("province").val();
    var cityval= dataInfo.getDom("city").val();
    var areaval= dataInfo.getDom("area").val();
    //赋值pro
    for(var i = 0; i < placeName.length; i++){
        // placeName[i].value
        if(placeName[i].value == provinceval){
            $("#address-province").val(provinceval);
            setSelect($("#address-city"),placeName[i].sub);
            //赋值市
            for(var j = 0; j < placeName[i].sub.length; j++){
                // placeName[i].sub[j].value
                if(placeName[i].sub[j].value == cityval){
                    $('#address-city').val(cityval);
                    setSelect($('#address-area'),placeName[i].sub[j].sub);
                    //赋值区
                    for(var k=0;k<placeName[i].sub[j].sub.length;k++){
                        // placeName[i].sub[j].sub[k].value;
                        if(placeName[i].sub[j].sub[k].value == areaval){
                            $('#address-area').val(areaval);
                            break;
                        }
                    }
                    break;
                }

            }
            break;
        }
    }
    //将省市区三级联动
    var curProv = 0;
    $("#address-province").change(function(){
        // var thisval = $(this).val();
        //赋值
        dataInfo.setVal('province',$(this).val());
        for(var i = 0;i<placeName.length;i++){
             curProv = i;

            if(placeName[i].value == $(this).val()){
                setSelect($("#address-city"),placeName[i].sub);
                setSelect($("#address-area"),placeName[i].sub[0].sub);
                //表单赋值(传入后台)
                dataInfo.setVal('city',$("#address-city").val());
                dataInfo.setVal('area',$("#address-area").val());
                break;
            }
        }
    });
    //市区联动
    $("#address-city").change(function(){
        dataInfo.setVal('city',$(this).val());
        for(var i=0;i<placeName[curProv].sub.length;i++){
             //placeName[curProv].sub[i].value;
             if(placeName[curProv].sub[i].value == $(this).val()){
                setSelect($("#address-area"),placeName[curProv].sub[i].sub);
                dataInfo.setVal('area',$("#address-area").val());
                break;

             }

        }
    });

})();