首页 > 代码库 > jquery下拉城市选择代码
jquery下拉城市选择代码
非常好的下拉城市选择代码，可选择热门城市，按字母排序的城市选择，带搜索框样式。
<!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>
演示地址
jquery下拉城市选择代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。