四级联动下拉菜单

最新推荐文章于 2021-06-10 13:11:14 发布
原创最新推荐文章于 2021-06-10 13:11:14 发布 · 2.5k 阅读
0 ·
CC 4.0 BY-SA版权
JS 同时被 2 个专栏收录
35 篇文章
订阅专栏
HTML/CSS
34 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>jQuery多级联动美化版Select下拉框DEMO演示</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" href="css/cui.css" />
	<script type="text/javascript" src="js/adToIp.js" ></script>
	<style>
body {
	color: #555;
	font-size: 14px;
	font-family: "微软雅黑", "Microsoft Yahei";
	background-color: #EEE;
}
a {
	color: #555;
}
a:hover {
	color: #f00;
}
.input {
	font-size: 14px;
	font-family: "微软雅黑", "Microsoft Yahei";
}
.wrap {
	width: 500px;
	margin: 300px 100px;
}
.h20 {
	height: 20px;
	overflow: hidden;
	clear: both;
}
.nice-select {
	width: 150px;
	padding: 0 10px;
	height: 30px;
	border: 1px solid #999;
	position: relative;
	box-shadow: 0 0 5px #999;
	background: #fff url(images/a2.jpg) no-repeat right center;
	cursor:pointer;
}
.nice-select input {
	display: block;
	width: 100%;
	height: 38px;
	line-height: 38px ;
	border: 0;
	outline: 0;
	background: none;
	cursor:pointer;
}
.nice-select ul {
	width: 100%;
	display: none;
	position: absolute;
	left: -1px;
	top: 38px;
	overflow: hidden;
	background-color: #fff;
	max-height: 150px;
	overflow-y: auto;
	border: 1px solid #999;
	border-top: 0;
	box-shadow: 0 3px 5px #999;
	z-index:9999;
}
.nice-select ul li {
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	padding: 0 10px;
	cursor: pointer;
}
.nice-select ul li.on {
	background-color: #e0e0e0;
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="wrap">
    <div class="nice-select" name="nice-select">
    <input class="input"  type="text" value="==选择县区==" readonly>
    <ul>
      <li data-value="一">县区1</li>
      <li data-value="二">县区2</li>
      <li data-value="三">县区3</li>
      <li data-value="四">县区4</li>
    </ul>
  </div>
      <div class="h20"></div>
  <div class="nice-select" name="nice-select">
    <input class="input" type="text" value="==选择村镇==" readonly>
    <ul>
      <li data-value="a">村1</li>
      <li data-value="b">村2</li>
      <li data-value="c">村3</li>
      <li data-value="d">村4</li>
    </ul>
  </div>
      <div class="h20"></div>
  <div class="nice-select" name="nice-select">
    <input class="input" type="text" value="==选择网吧==" readonly>
    <ul>
      <li data-value="A">网吧1</li>
      <li data-value="B">网吧2</li>
      <li data-value="C">网吧3</li>
      <li data-value="D">网吧4</li>
    </ul>
  </div>
  	<div class="h20"></div>
    <div class="nice-select" name="nice-select">
    <input class="input" type="text" value="==选择摄像头==" readonly>
    <ul>
      <li data-value="1">摄像头1</li>
      <li data-value="2">摄像头2</li>
      <li data-value="3">摄像头3</li>
      <li data-value="4">摄像头4</li>
    </ul>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script>
var adress = [];

$('[name="nice-select"]').click(function(e){
//	$('[name="nice-select"]').find('ul').hide();
	$(this).find('ul').show();
	e.stopPropagation();
});
$('[name="nice-select"] li').hover(function(e){
	$(this).toggleClass('on');
	e.stopPropagation();
});
$('[name="nice-select"] li').click(function(e){
	var val = $(this).text();
	var dataVal = $(this).attr("data-value");
	$(this).parents('[name="nice-select"]').find('input').val(val);
	$('[name="nice-select"] ul').hide();
	e.stopPropagation();
//	alert("中文值是："+val);
//	alert("数字值是："+dataVal);
	
	adress.push(dataVal);
	if(adress.length > 4)
	{
		var temp = adress.pop();
		var regNum = /^\d+$/;
		var regalp = /[a-z]/;
		var regAlp = /[A-Z]/;
		if(temp.match(regNum)){
			adress[3] = temp;
		}else if(temp.match(regalp)){
			adress[1] = temp;
		}else if(temp.match(regAlp)){
			adress[2] = temp;
		}else{
			adress[0] = temp;
		}		
	}	
//	alert(adress);
	var adIp = adress.join("");
//	alert(adIp);
	for(var item in adressToIP){           //adressToIP外部js文件中json变量名
		if(item == adIp ){
			alert(adressToIP[item]);
		}
	}
	//alert($(this).parents('[name="nice-select"]').find('input').val());
});

$(document).click(function(){
	$('[name="nice-select"] ul').hide();
});
</script>

</body>
</html>