标签：style blog http io ar color os sp java
非常好的下拉城市选择代码，可选择热门城市，按字母排序的城市选择，带搜索框样式。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery下拉框美化特效-素材吧</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="css/cui.css" /> <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: 100px auto; } .h20 { height: 20px; overflow: hidden; clear: both; } .nice-select { width: 245px; padding: 0 10px; height: 38px; 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 \9; 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 class="wrap"> <div class="nice-select" name="nice-select"> <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 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 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> <script type="text/javascript" src="js/jquery.js"></script> <script> $(‘[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); //alert($(this).parents(‘[name="nice-select"]‘).find(‘input‘).val()); }); $(document).click(function(){ $(‘[name="nice-select"] ul‘).hide(); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;"> <p>特效收集：<a href="http://www.sucai888.com/" target="_blank">素材吧</a></p> </div> <!--以下代码并不是素材部分，请自主删除以下代码--> <style> .pull-left{ float:left; display:inline; margin-left:10px; font-size:12px;} .footjbl{ width:700px; margin:0 auto;position:fixed; bottom:20px; } </style> <div class="footjbl"> <ul class="dropdown-menu nav-category" style="padding-top: 10px;"> <li class="pull-left"><a href="http://www.sucai888.com" target="_blank">素材吧:</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/tubiaosucai" target="_blank">图标</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/texiao" target="_blank">网页特效</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/moban" target="_blank">网页模板</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/psdsucai" target="_blank">PSD素材</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/shiliangsucai" target="_blank">矢量素材</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/html5css3" target="_blank">HTML5</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/zitixiazai" target="_blank">字体下载</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/gaoqingtupiansucai" target="_blank">高清图片</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/default" target="_blank">更多分享</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/pin/lastest" target="_blank">最新素材</a></li> <li class="pull-left"><a href="http://www.sucai888.com/pin/hot" target="_blank">最热素材</a></li> </ul> </div> </body> </html>
标签：style blog http io ar color os sp java
原文地址：http://www.cnblogs.com/sucai888/p/4126590.html
