省市区三级联动（附j全国省市区json文件）

效果如图所示：

 

首先提供全国所有省份的JS文件

下载地址：https://files.cnblogs.com/files/likui-bookHouse/address.rar

打开js内容如下：

 

html代码：

<div class="easyui-panel" style="padding:10px;">
    <form id="logisticPointForm" method="post">
        <div>
            <label>交接点:</label>
            <input class="easyui-textbox" id="PointName" name="PointName" data-options="required:true" style="width:70%;">
        </div>
        <div>
            <label>选择区域:</label>
            <input class="easyui-combobox" id="Province" name="Province" style="width:22%" ,  data-options="prompt:'省',required:true,editable:false,">
            <input class="easyui-combobox" id="City" name="City" style="width:22%" , data-options="prompt:'市',required:true,editable:false,">
            <input class="easyui-combobox" id="County" name="County" style="width:22%" , data-options="prompt:'区/镇',required:true,editable:false,">
        </div>
        <div>
            <label>详细地址:</label>
            <input class="easyui-textbox" id="Address" name="Address" data-options="required:true" style="width:70%;">
        </div>
        <div>
            <label>对方物流员:</label>
            <input class="easyui-linkbutton" id="OppositeLogister" name="OppositeLogister" style="height:30px;" value="+选择物流员" onclick="sectionManageObj.choiceLogisterDialog(1)" />
            <input id="OppositeLogisterId" name="OppositeLogisterId" type="hidden" />
        </div>
        <div>
            <label>我方物流员:</label>
            <input class="easyui-linkbutton" id="MyLogister" name="MyLogister" style="height:30px;" value="+选择物流员" onclick="sectionManageObj.choiceLogisterDialog(2)"/>
            <input id="MyLogisterId" name="MyLogisterId" type="hidden"/>
        </div>
        <div>
            <label>最晚交接时间:</label>
            <!--<input class="easyui-datetimebox" id="LatestDate" name="LatestDate" style="width:30%" ,required:true, data-options="onShowPanel:function(){$(this).datetimebox('spinner').timespinner('setValue','00:00:00')}" >-->
            <input class="easyui-timespinner" id="LatestDate" name="LatestDate" required="required" data-options="width:'30%',showSeconds:true">
        </div>
        <div style="text-align:center;">
            <input href="#" class="easyui-linkbutton" value="取消" style="width:100px;height:30px;text-align:center;border-radius:5px;background:dimgray;color:white;" data-options="onClick:sectionManageObj.closeAddDialog">
            <input href="#" class="easyui-linkbutton" value="确认" style="width:100px;height:30px;text-align:center;border-radius:5px;background:dodgerblue;color:white;" data-options="onClick:sectionManageObj.addSubmitDialog">
        </div>
    </form>
</div>
<style>
    label {
        display: inline-block;
        width:80px;
    }
    #logisticPointForm div {
        margin-top:10px;
        margin-bottom:10px;
    }
</style>
<script>
    $('#LatestDate').datetimebox({
        required : true,
        onShowPanel:function(){
            //设置为只能设置为时分秒的选择器
            $(this).datetimebox("spinner").timespinner("setValue","00:00:00");
        }
    });

</script>
//引用js文件
<script type="text/javascript" src="./javascript/address.js"></script>
<script type="text/javascript" src="./javascript/logistics/sectionManage.js"></script>

js代码：

 var sectionManageObj = {
 ProvinceList: [],
    initForm: function () {
        site_address.forEach(function (aa, bb) {
            if (aa.TopID == 0) {
                sectionManageObj.ProvinceList.push(aa)
            }
        });
        sectionManageObj.bindaddresscombox('', '', '');
        $("#City").combobox({ data: [] })
        $("#County").combobox({ data: [] })
    },
    bindaddresscombox: function (province, city, county) {
        $("#Province").combobox({
            data: sectionManageObj.ProvinceList,
            valueField: "ID",
            textField: "AddName",
            onChange: function (newvalue) {
                $("#City").combobox({
                    data: sectionManageObj.getsiteaddress(newvalue)
                })
                $("#County").combobox({
                    data: []
                })
            }
        });
        $("#City").combobox({
            valueField: "ID",
            textField: "AddName",
            onChange: function (newvalue) {
                $("#County").combobox({
                    data: sectionManageObj.getsiteaddress(newvalue)
                })
            }
        });
        $("#County").combobox({
            valueField: "ID",
            textField: "AddName"
        });
    },
    getsiteaddress: function (pID) {
        var newlist = [];
        site_address.forEach(function (aa, bb) {
            if (aa.TopID == pID) {
                newlist.push(aa)
            }
        })
        return newlist;
    }
}