三级选择器哟

Html

Css


    
    
        省市区

.sanji {
	width:300px;
	height:200px;
	border:1px solid red;
	display:none
}
.sanji p {
	width:300px;
	line-height:40px;
	border-bottom:2px solid red;
	margin:0
}
.sanji p span {
	display:inline-block;
	width:33.3%;
	text-align:center;
	line-height:40px
}
.sanji p .avtive {
	background:red;
	color:white;
}
.sanji > div {
	width:100%;
	height:150px;
	display:none
}
.sheng {
	padding:0;
	list-style:none;
	width:100%
}
.sheng li {
	padding:8px 16px;
	border:1px solid red;
	text-align:center;
	float:left;
	margin-left:10px;
	margin-bottom:10px
}
.sheng .active {
	background:red;
	color:white;
}

$("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

立即下载

三级选择器哟



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

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

黄大雄

相关代码

三级选择器哟

最新