三级联动

最新推荐文章于 2024-02-04 14:49:46 发布
码世界
最新推荐文章于 2024-02-04 14:49:46 发布
阅读量3.1k
点赞数 1
CC 4.0 BY-SA版权
分类专栏：前端知识
本文链接：https://blog.csdn.net/qq_30607437/article/details/80029573
前端知识专栏收录该内容
31 篇文章
订阅专栏
本文介绍了一个基于HTML和JavaScript实现的三级联动选择器，用于让用户依次选择店铺平台、站点及国家等选项。通过DOM操作和事件监听实现了良好的用户体验。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="ipayLinks,跨进金融,银行"/>
    	        <meta name="description" content="ipayLinks"/>
		<title>三级联动</title>
		<style type="text/css">
			.fl{ float: left; }
			.fr{ float: right; }
			.oe { display: none;}
			@font-face {font-family: "iconfont";
			  src: url('iconfont.eot?t=1523952907100'); /* IE9*/
			  src: url('iconfont.eot?t=1523952907100#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
			  url('iconfont.ttf?t=1523952907100') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			  url('iconfont.svg?t=1523952907100#iconfont') format('svg'); /* iOS 4.1- */
			}
			.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
			.icon-diannao:before { content: "\e604"; }
			.icon-xiala:before { content: "\e68a"; }
			.icon-qiu:before { content: "\e636"; }
			.icon-zhiyuandidian6:before { content: "\e60d"; }
			.addButton:hover,.addButton:link{ background:#198BCC;}
			.addButton img{ width:21px; height: 21px; display: block; margin-top:5px; margin-left: 28px; float: left;}
			.addButton span{ display: inline-block; float: left; padding-left:10px; font-size:16px;}
			.shopLeft { width: 305px; padding-right: 1px;}
			.shopLeft dl{ float:left; width:100%; height:auto; cursor: pointer;position: relative;}
			.shopLeft dl dt{ padding:20px 28px 20px 15px; }
			.shopLeft dl dt,.shopLeft dl dd{ float: left; width: 100%; height: auto; border-bottom: 1px solid #EEE; }
			.shopLeft dl dt span,.shopLeft dl dd p span{ display: inline-block; font-size:16px; line-height: 23px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
			.shopLeft dl dt span.conversionSite.on{ color:#3b3b3b;}
			.shopLeft dl dt span.conversionSite,.shopLeft dl dd p .siteName{ max-width:130px; color:#999;}
			.shopLeft dl dt span.currency,.shopLeft dl dd p .currencyCompany{ width: 50px; color: #f5a623;}
			.shopLeft dl dd p .currencyCompany{ margin-right: 20px;}
			.shopLeft dl dt span.currency.on{ display: none;}
			.shopLeft dl dd{ margin-left: -2px;}
			.shopLeft dl dd p{float: left; width: 100%; position: relative; height: auto; padding: 20px 28px 20px 50px; background:#fafafa; border-bottom: 1px solid #EEE;}
			.shopLeft dl dd p .siteName{ color: #333;}
			.shopLeft dl dd p:hover{ background: #ebf6fc;}
			.shopLeft dl dt .classIcon{ display: block; margin-right:15px; padding-top:2px; font-size:20px; text-align: center; color:#1fa0e8;}
			.shopLeft dl dt .shopIcon,.shopLeft dl dd .shopIcon{ width: 80px; height:28px;}
			.shopLeft dl dt .arrowIcon{padding-top: 10px; font-size:8px; color:#56b8ee;}
			.shopLeft dl dd .arrowIcon{ position: absolute; right: 28px; top: 23px; color: #f5a623; padding-right:3px;}
		</style>
	</head>
	<body>
		<div class="shopLeft shop fl">
				<!--请选择店铺平台-->
				<dl class="shopIconBox">
					<dt>
						<i class="iconfont icon-diannao classIcon fl"></i>
						<span class="conversionSite fl title1">请选择店铺平台</span>
						<img class="shopIcon fl oe imgShow" src="../../cfp/img/index/login.png"/>
						<i class="iconfont small-font  icon-xiala fr arrowIcon"></i>
					</dt>
					<dd class="oe imgIcon">
						<!--<p>
							<img class="shopIcon fl clickShopIcon" src="../../cfp/img/index/noshop.png"/>
							
							<i class="iconfont icon-duihao fr arrowIcon oe"></i>
						</p>
						<p>
							<img class="shopIcon fl clickShopIcon" src="../../cfp/img/index/login.png"/>
							<i class="iconfont icon-duihao fr arrowIcon oe"></i>
						</p>-->
					</dd>
				</dl>
				<!--请选择所属站点-->
				<dl class="siteNameBox">
					<dt>
						<i class="iconfont icon-qiu classIcon fl"></i>
						<span class="conversionSite fl title2">请选择所属站点</span>
						<i class="iconfont small-font icon-xiala fr arrowIcon"></i>
					</dt>
					<dd class="oe stationName">
						<!--<p>
							<span class="siteName">北美站</span>
							<i class="iconfont icon-duihao fr arrowIcon oe"></i>
						</p>-->
					</dd>
				</dl>
				<!--请选择所属国家-->
				<dl class="countryBox">
					<dt>
						<i class="iconfont icon-zhiyuandidian6 classIcon fl"></i>
						<span class="conversionSite fl title3">请选择所属国家</span>
						<i class="iconfont small-font  icon-xiala fr arrowIcon"></i>
						<span class="currency fr on money3">USD</span>
					</dt>
					<dd class="oe countryName">
						<!--<ul class="countryName">{{console.log($countryName.html())}}-->
							<!--<li >
								<p>
									<span class="siteName">美国</span>
									<span class="currencyCompany">USD</span>
									<i class="iconfont icon-duihao fr arrowIcon oe"></i>
								</p>
								<p>
									<span class="siteName">法国</span>
									<span class="currencyCompany">EUR</span>
									<i class="iconfont icon-duihao fr arrowIcon oe"></i>
								</p>
							</li>
							<li class="oe">
								<p>
									<span class="siteName">德国</span>
									<span class="currencyCompany">HHH</span>
									<i class="iconfont icon-duihao fr arrowIcon oe"></i>
								</p>
								<p>
									<span class="siteName">意大利</span>
									<span class="currencyCompany">OOO</span>
									<i class="iconfont icon-duihao fr arrowIcon oe"></i>
								</p>
							</li>
							<li class="oe">
								<p>
									<span class="siteName">西班牙</span>
									<span class="currencyCompany">YYY</span>
									<i class="iconfont icon-duihao fr arrowIcon oe"></i>
								</p>
							</li>-->
						</ul>
					</dd>
				</dl>
			</div>
		<script src="../../cfp/js/lib/jquery-1.8.3.min.js"></script>
		<script >			
		        $(function(){
	        var data ={
		'data': [
			{
				"createDate": null,
				"currencyCode": "",
				"icon": "plat_amazon.png",
				"id": 0,
				"name": "",
				"region": "",
				"site": "",
				"siteEnum": [           
					{
                        code: 'na',
                        msg: '北美站',
                        currency: 'USD',
                        country: [
                            {
                                code: '美国',
                                msg: 'USD',
                                name: 'AMERICA',
                                region: "US"
                            }
                        ],
                        inAccount: 'null'
                    },
					{
						code: 'eur',
						msg: '欧洲站',
						currency: 'EUR',
						country: [					
							{
								code: 'fr',
								msg: '法国'
							}, {
								code: 'it',			
								msg: '意大利'
							}, {
								code: 'es',			
								msg: '西班牙'
							}
						],
						inAccount: null
					}
				],
				"status": 0,
				"type": "Amazon",
				"updateDate": null
			},
			{
				"createDate": null,
				"currencyCode": "",
				"icon": "plat_ebay.png",
				"id": 0,
				"name": "",
				"region": "",
				"site": "",
				"siteEnum": [
					{
						code: 'na',
                        msg: '北美站',
                        currency: 'USD',
                        country: [
                            {
                                code: '美国',
                                msg: 'USD',
                                name: 'AMERICA',
                                region: "US"
                            }
                        ],
                        inAccount: 'null'
					},
					{							
						code: 'eur',
						msg: '空间站',
						currency: 'EUR',
						country: [
							{						
								code: 'fr',
								msg: '月球'
							}, {
								code: 'it',			
								msg: '木星'
							}, {
								code: 'es',			
								msg: '火星'
							}
						],
						inAccount: null
					}
				],
				"status": 0,
				"type": "ebay",
				"updateDate": null
			}
		]
	}
	for(var i = 0; i < data.data.length; i++){
		//图片显示区
		var imgIcon = '<p data-currdata = "'+ data.data[i].type +'" data-type="type">'+
						'<img class="shopIcon fl clickShopIcon" src="'+ data.data[i].icon +'"/>'+
					 	'<i class="iconfont icon-duihao fr arrowIcon oe"></i>'+
				      '</p>'
		//console.log(imgIcon);
		$(".imgIcon").append(imgIcon);
	}
	var str = "";
    var src = ""
    var countryName = $(".countryName");
    var stationName = $(".stationName");
    var type = "", site = "", country = "";
    var twoCode = "", threeRegion = "", platSite = "";
    var platType = "";
//	$('.shopLeft dl dd p').click(function(){
//		$(this).parent('dd').hide();
//	})
	
	
	$('.shopLeft dl').on('click', function(e){
		//子类对勾的选 择
		$(e.target).find('i').removeClass('oe').parent().siblings().find('i').addClass('oe');
		//根据P标签获取标签内data数据
		if(e.target.tagName === "P") {
			if($(e.target).data('type') === "type") {
				type = $(e.target).data('currdata')
			} else if($(e.target).data('type') === "site") {
				site = $(e.target).data('currdata')
			} else {
				country =$(e.target).data('currdata')
			}
		}
		/*圉片的显示*/
		if( $(this).attr('class') === "shopIconBox") {
			src = ""
			stationName.empty();
			$('.imgIcon').css('display','block');
			//countryName.empty();
			if(e.target.tagName === "P") {
				$('.imgShow').attr('src',$(e.target).find('img').attr('src'));
				$('.imgShow').removeClass('oe');
				
				//console.log($(e.target))
				for(var i=0; i< data.data.length; i++){
					if( data.data[i].icon === $(e.target).find('img').attr('src') ){
						platType = data.data[i].type;
						for(var j = 0; j < data.data[i].siteEnum.length;j++){
								src = src + '<p data-currdata="' + data.data[i].siteEnum[j].msg + '" data-type="site">'+
									'<span class="siteName">'+ data.data[i].siteEnum[j].msg +'</span>'+
									'<i class="iconfont icon-duihao fr arrowIcon oe"></i>'+
								'</p>'
							
						}
					}
				}
				stationName.append(src);
				if($(e.target).find('i').hasClass('oe')==false){
					$('.imgIcon').toggle();
				}
				$('.title1').hide();
				$(".title2").text('请选择所属站点').removeClass('on');
				$(".title3").text('请选择所属国家').removeClass('on');
				$('.money3').addClass('on');
				
				
				// 点击第一级按钮
				$.ajax({
					type:"post",
					url:"http://xxxx",
					async:true,
					data : {
						type : type
					},
					success : function(){
						
					}
				});
			}


		}
		
		
		/*第二层站点的显示*/
		if($(this).attr('class') === "siteNameBox") {
			str = "";
			countryName.empty();
			$('.stationName ').css('display','block');
			$(".title3").text('请选择所属国家').removeClass('on');
			$('.money3').addClass('on');
			if(e.target.tagName === "P") {
				for (var i = 0; i < data.data.length; i++) {
                    if (platType == data.data[i].type) {
                        for (var j = 0; j < data.data[i].siteEnum.length; j++) {
                            if ($(e.target).data('currdata') === data.data[i].siteEnum[j].msg) {
                                for (var k = 0; k < data.data[i].siteEnum[j].country.length; k++) {


                                    str = str + '<p data-type="country" data-code="' + data.data[i].siteEnum[j].code + '"  data-region="' + data.data[i].siteEnum[j].country[k].region + '"  data-currdata ="' + data.data[i].siteEnum[j].country[k].msg + '">' +
                                        '<span class="siteName fl">' + data.data[i].siteEnum[j].country[k].msg + '</span>' +
                                        '<i class="iconfont icon-duihao fr arrowIcon oe"></i>' +
                                        '<span class="currencyCompany fr">' + data.data[i].siteEnum[j].country[k].code + '</span>' +
                                        '</p>'
                                    //$(".countryName").append(countryName);
                                }
                            }
                        }
                    }
                }
				countryName.append(str);
				if($(e.target).find('i').hasClass('oe')==false){
					$('.stationName ').toggle();;
				}
				
				$('.title2').text($(e.target).data('currdata')).addClass('on');
				$('.money3').addClass('on');
				
				//点击第二级按钮
				$.ajax({
					type:"post",
					url:"http://xxxx",
					async:true,
					data : {
						type : type,
						site : site
					},
					success : function(){
						
					}
				});
			}
		}
		/*根据站点国家的显示*/
		if($(this).attr('class') === "countryBox") {
			$('.countryName ').css('display','block');
			if(e.target.tagName === "P") {
				if($(e.target).find('i').hasClass('oe')==false){
					$('.countryName ').toggle();
				}
				$('.title3').text($(e.target).data('currdata')).addClass('on');
				$('.money3').text($(e.target).find('.currencyCompany').text())
				$('.money3').removeClass('on');
				// 点击第三级按钮
				$.ajax({
					type:"post",
					url:"http://xxxx",
					async:true,
					data : {
						type : type,
						site : site,
						country : country
					},
					success : function(){
						
					}
				});
			}
		}
		
		$(this).siblings().find('dd').addClass('oe');
		$(this).find('dd').removeClass('oe');


	});
/*写的比较丑的联动效果*/
//	var oneMenu = $(".shopLeft dl dt");
//	var twoMenu = $(".shopLeft dl dd p");
//	var ShopPlatform = $(".shopIconBox dd p");
//	var twoMenu = $('.siteNameBox dd p');
//	var thrMenu = $('.countryBox dd');
//	var thrListP = $('.countryBox dd p');
//	oneMenu.click(function(){
//		$(this).siblings().removeClass('oe').parents().siblings().find('dd').addClass('oe');
//		ShopPlatform.click(function(){
//			$(this).children('i').removeClass('oe').parent().siblings().find('i').addClass('oe');
//			var clickShopIcon = $(this).children('img').attr('src');
//			$(this).parents().siblings('dt').find('.conversionSite ').hide();
//			$(this).parents().siblings('dt').find('img').removeClass('oe').attr('src',clickShopIcon);
//		});
//		twoMenu.click(function(){
//			$(this).children('i').removeClass('oe').parent().siblings().find('i').addClass('oe');
//			var siteName = $(this).children('.siteName').text();
//			$(this).parents().siblings('dt').find('.conversionSite ').addClass('on').text(siteName);
//			var index = $(this).index();
//			thrMenu.eq(index).show().siblings('p').css('display','none');
//		});
//		thrListP.click(function(){
//			$(this).children('i').removeClass('oe').parent().siblings().find('i').addClass('oe');
//			var siteName = $(this).children('.siteName').text();
//			var currencyName = $(this).children('.currencyCompany').text();
//			$(this).parents().siblings('dt').find('.conversionSite ').addClass('on').text(siteName);
//			$(this).parents().siblings('dt').find('.currency').removeClass('on').text(currencyName);
//		});
//	});	
});


	        </script>
	</body>
</html>