<!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>
