jQuery省市区三级和四级联动演示

收藏

本文演示了三种jQuery联动效果，demo1四级联动：http://www.erdangjiade.com/jquery/5/573/demo/ 演示2:三级联动：http://www.erdangjiade.com/jquery/5/573/demo/demo_three.html 演示3带有省市区数据的三级联动效果：http://www.erdangjiade.com/jquery/5/573/demo/demo_db.html

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

四级联动下拉html代码：

<select id="Select1" name="Select1" autocomplete="off"></select> 
<select id="Select2" name="Select2" autocomplete="off"></select> 
<select id="Select3" name="Select3" autocomplete="off"></select> 
<select id="Select4" name="Select4" autocomplete="off"></select>

定义四级联动下拉数据

var fourSelectData = { 
    "省份": {val: "", items: { 
            "城市": {val: "", items: { 
                    "区县": {val: "", items: { 
                            "乡镇": "" 
                        }} 
                }} 
        }}, 
    "江苏": {val: "02", items: { 
            "南京": {val: "0201", items: { 
                    "玄武区": {val: "020101", items: { 
                            "玄武区1": "02010101", 
                            "玄武区2": "02010102", 
                            "玄武区3": "02010103", 
                            "玄武区4": "02010104", 
                        }} 
                }}, 
            "盐城": {val: "0202", items: { 
                    "阜宁县": {val: "020201", items: { 
                            "阜城镇": "02020101", 
                            "三灶镇": "02020102", 
                            "陈良镇": "02020103", 
                            "郭墅镇": "02020103", 
                        }}, 
                    "滨海县": {val: "020202", items: { 
                            "通榆镇": "02020201", 
                            "蔡桥镇": "02020202" 
                        }} 
                }} 
        }}, 
};

初始化数据并调用数据

var defaults = { 
    s1: 'Select1', 
    s2: 'Select2', 
    s3: 'Select3', 
    s4: 'Select4', 
    v1: "02", 
    v2: "0202", 
    v3: "020202", 
    v4: "02020202" 
}; 
$(function() { 
    fourSelect(defaults); 
});