码迷,mamicode.com
首页 > Web开发 > 详细

jquery下拉城市选择代码

时间:2014-11-27 18:11:14      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   java   

非常好的下拉城市选择代码,可选择热门城市,按字母排序的城市选择,带搜索框样式。

bubuko.com,布布扣

 

<!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下拉城市选择代码

标签:style   blog   http   io   ar   color   os   sp   java   

原文地址:http://www.cnblogs.com/sucai888/p/4126590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!