二级联动列表需求选择

浏览：663次- 评论：0次- 发布时间：2017-09-22

Html

Css

@charset "UTF-8";
	* {
	box-sizing:border-box;
	margin:0px;
	padding:0px;
	font-family:"微软雅黑",helvetica,sans-serif;
	-moz-user-select:none;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
	box-sizing:border-box;
	text-decoration:none;
	list-style:none;
	text-shadow:none;
}
*::-webkit-scrollbar {
	width:0;
	height:0;
}
.ui-loader,.ui-loader-default {
	display:none;
}
#two-list {
	width:300px;
	height:auto;
}
#two-list .two-list-title {
	width:100%;
	height:35px;
	line-height:33px;
	border-top:1px solid #EFEFEF;
	text-align:center;
	font-size:16px;
	border-bottom:1px solid #EFEFEF;
}
#two-list .two-list-title2 {
	width:100%;
	border-bottom:1px solid #EFEFEF;
	height:35px;
}
#two-list .two-list-title2 div {
	float:left;
	width:50%;
	font-size:16px;
	text-align:center;
	line-height:34px;
	border-right:1px solid #EFEFEF;
}
#two-list .two-list-main {
	width:100%;
	height:170px;
	position:relative;
	border-bottom:1px solid #EFEFEF;
}
#two-list .two-list-main #two-list-left {
	width:50%;
	height:170px;
	position:absolute;
	left:0px;
	top:0px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
#two-list .two-list-main #two-list-left div {
	height:auto;
	width:100%;
}
#two-list .two-list-main #two-list-left div li {
	height:34px;
	width:100%;
	text-align:center;
	line-height:32px;
	border-bottom:1px solid #EFEFEF;
	border-right:1px solid #EFEFEF;
	font-size:16px;
}
#two-list .two-list-main #two-list-right {
	width:50%;
	height:170px;
	position:absolute;
	right:0px;
	top:0px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
#two-list .two-list-main #two-list-right li {
	height:auto;
	width:100%;
	text-align:center;
}
#two-list .two-list-main #two-list-right li div {
	font-size:14px;
	width:100%;
	height:34px;
	line-height:34px;
	background-color:#F6F6F6;
	color:#999999;
}
#two-list .two-list-end {
	width:100%;
	height:45px;
	border-bottom:1px solid #EFEFEF;
	line-height:44px;
}
#two-list .two-list-end div {
	width:50%;
	float:left;
	font-size:14px;
	text-align:center;
}
#two-list .two-list-end #two-list-end2 {
	color:#FF4200;
}

$(function() {

$("#two-list-end2").click(function() {

if ($("#two-list-left li[class='action']").length == 0) {
            alert("请选择一级需求")
        } else if ($("#two-list-left li[class='action']").length != 0 && $("#two-list-right li>div[class='activediv']").length == 0) {
            alert("请选择二级需求")
        } else {
            alert("选择成功" + $.trim($("#two-list-left li[class='action']").text()) + $("#two-list-right li>div[class='activediv']").text());
        }
    })

$("#two-list-end1").click(function() {
        $("#two-list-left li").removeClass("action");
        $("#two-list-right li").css("display", "none");
        $("#two-list-left li").css({
            color: "#000000",
            backgroundColor: "#ffffff"
        })

})

$("#two-list-left li").click(function() { /*----------------选项卡的点击事件，移动端用tap-----------------*/

$(this).css({ /*选中选项卡的样式*/
            color: "#ff4200",
            backgroundColor: "#F6F6F6"

}).siblings().css({ /*未选中选项卡的样式*/
            color: "#000000",
            backgroundColor: "#ffffff"
        });

});

$("#two-list-right li>div").click(function() {
        $("#two-list-right li>div").css("color", "#999999");
        $("#two-list-right li>div").removeClass("activediv");
        $(this).addClass("activediv");
        $(this).css({
            color: "#ff4200"
        }).siblings().css({
            color: "#999999"
        })
    })

$("#two-list-left li").click(function() {
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#two-list-right li").eq(index).css("display", "block").siblings().css("display", "none");
    });

})

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

jQuery调用版本：2.1.4

立即下载收藏

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

代码描述：二级联动以列表的形式显示，并且左右均可独立滚动

选取左边后右侧会弹出相对应的需求列表，之后从列表中选择需求后确定会给提示，如果没选需求会提醒选择

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

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

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