最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-11-24 05:35浏览(1601)

本文演示了三种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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery省市区三级和四级联动演示
分类:表单代码 > 三级联动 难易:初级
查看演示 下载资源: 114

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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);
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/573.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    11-14 08:26
    puton_wp
    完美 先收藏了
1 2