三级选择器

浏览：532次- 评论：0次- 发布时间：2018-10-09

Html

Css


    
    
        省市区

$("input").click(function() {
        $(".sanji").css({
            display: "block"
        })
    });
    $("input").change(function() {
        if ($("input").val() == "") {
            $(".sanji div").eq(1).children().children().remove();
            $(".sanji div").eq(2).children().children().remove();
        }
    });
    var data = [{
            name: "湖北省",
            sub: [{
                name: "武汉市",
                shi: [{
                    name: "大冶市"
                }, {
                    name: "黄石市"
                }, {
                    name: "阳新市"
                }]
            }]
        },
        {
            name: "湖南省",
            sub: [{
                name: "长沙市",
                shi: [{
                    name: "灵乡悬"
                }]
            }]
        },
        {
            name: "广东省",
            sub: [{
                name: "深圳市",
                shi: [{
                    name: "福田区"
                }, {
                    name: "龙岗区"
                }, {
                    name: "龙华区"
                }, {
                    name: "龙华区"
                }, {
                    name: "龙华区"
                }]
            }]
        }
    ];

for (var i = 0; i < data.length; i++) {
        var o = data[i];
        var li = '<li>' + o.name + '</li>';
        $(".sanji div").eq(0).children().append(li);
    }
    var ret = [];
    $(".sanji div").eq(0).children().children().click(function() {
        ret[0] = $(this).text();
        $("input").val(ret[0]);
        $(".sanji div").eq(1).children().children().remove();
        for (var i = 0; i < data.length; i++) {
            var o = data[i];
            if (o.name == $(this).text()) {
                for (var j = 0; j < o.sub.length; j++) {
                    var k = o.sub[j];
                    var li1 = '<li>' + k.name + '</li>';
                    $(".sanji div").eq(1).children().append(li1);
                }
            }
        }
    });
    $(".sanji div").eq(1).children().on("click", "li", function() {
        ret[1] = $(this).text();
        $("input").val(ret[0] + ret[1]);
        $(".sanji div").eq(2).children().children().remove();
        for (var i = 0; i < data.length; i++) {
            var o = data[i];
            for (var j = 0; j < o.sub.length; j++) {
                var k = o.sub[j];
                if (k.name == $(this).text()) {
                    for (var q = 0; q < k.shi.length; q++) {
                        var w = k.shi[q];
                        var li2 = '<li>' + w.name + '</li>';
                        $(".sanji div").eq(2).children().append(li2);
                    }
                }
            }
        }
    });
    $(".sanji div").eq(2).children().on("click", "li", function() {
        ret[2] = $(this).text();
        $("input").val(ret[0] + ret[1] + ret[2]);
    });

$(".sanji p span").click(function() {
        var i = $(this).index();
        $(this).addClass("avtive").siblings().removeClass("avtive");
        $(".sanji div").eq(i).css({
            display: "block"
        }).siblings("div").css({
            display: "none"
        })
    });
    $(".sheng").on("click", "li", function() {
        var index = $(this).parent().parent().index();
        $(this).addClass("active").siblings().removeClass("active");
        if (index != 3) {
            $(".avtive").next().addClass("avtive").siblings().removeClass("avtive");
            $(this).parent().parent().next().css({
                display: "block"
            }).siblings("div").css({
                display: "none"
            })
        } else {
            $(".sanji").css({
                display: "none"
            });
            return false;
        }
    })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：模仿别人写的，有点问题没想到解决办法，过几天再改进下

数据格式：

var data = [{
    name: "湖北省",
    sub: [{
        name: "武汉市",
        shi: [{
            name: "大冶市"
        }, {
            name: "黄石市"
        }, {
            name: "阳新市"
        }]
    }]
}, {
    name: "湖南省",
    sub: [{
        name: "长沙市",
        shi: [{
            name: "灵乡悬"
        }]
    }]
}, {
    name: "广东省",
    sub: [{
        name: "深圳市",
        shi: [{
            name: "福田区"
        }, {
            name: "龙岗区"
        }, {
            name: "龙华区"
        }, {
            name: "龙华区"
        }, {
            name: "龙华区"
        }]
    }]
}];

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取