非常好的下拉城市选择代码，可选择热门城市，按字母排序的城市选择，带搜索框样式。
<!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>
时间： 2024-11-02 00:31:23