四级联动下拉菜单

来源：互联网发布：八一建军节军装照软件编辑：程序博客网时间：2024/04/30 07:27
<!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>
0 0