jQuery模拟12306城市选择框功能简单实现方法示例
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net jQuery城市选择框</title>
<style>
#parent{
width:500px;
position:relative;
}
#text{
height:25px;
}
#select{
width:420px;
height:185px;
position:absolute;
top:31px;
left:0;
background:#eeeeee;
}
.cities{
width:60px;
height:25px;
line-height:25px;
margin:5px 5px 0 5px;
float:left;
text-align:center;
font-family:'Times New Roman';
font-size:15px;
cursor:pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#select").hide();
$("#text").focus(function(){
$("#select").show();
});
$(".cities").click(function(){
$("#text").val($(this).text());
$("#select").hide();
});
$("#text").blur(function(){
setTimeout(function(){
$("#select").hide();
}, 300);
});
});
</script>
</head>
<body>
<div id="parent">
<input type="text" id="text">
<div id="select">
<div class="cities">乌鲁木齐</div>
<div class="cities">兰州</div>
<div class="cities">西宁</div>
<div class="cities">拉萨</div>
<div class="cities">呼和浩特</div>
<div class="cities">哈尔滨</div>
<div class="cities">长春</div>
<div class="cities">沈阳</div>
<div class="cities">三亚</div>
<div class="cities">北京</div>
<div class="cities">天津</div>
<div class="cities">太原</div>
<div class="cities">济南</div>
<div class="cities">银川</div>
<div class="cities">西安</div>
<div class="cities">郑州</div>
<div class="cities">南京</div>
<div class="cities">杭州</div>
<div class="cities">福州</div>
<div class="cities">广州</div>
<div class="cities">台北</div>
<div class="cities">南宁</div>
<div class="cities">昆明</div>
<div class="cities">成都</div>
<div class="cities">重庆</div>
<div class="cities">贵阳</div>
<div class="cities">长沙</div>
<div class="cities">南昌</div>
<div class="cities">合肥</div>
<div class="cities">武汉</div>
<div class="cities">上海</div>
<div class="cities">海口</div>
<div class="cities">香港</div>
<div class="cities">澳门</div>
</div>
</div>
</body>
</html>
运行效果如下：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试一下运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery模拟html下拉多选框的原生实现方法示例
本文实例讲述了jQuery模拟html下拉多选框的原生实现方法.分享给大家供大家参考,具体如下: 用js, html, css 简单的实现一个HTML 下拉多选框,不试用其他框架的情况下,可以借鉴一下,如果用jqueryUI, BOOTSTRAP, 就没必要参考了.毕竟那些现成的东西更好用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-
-
jquery模拟多级复选框效果的简单实例
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c
-
模拟多级复选框效果的jquery代码
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这人很好做,代码如下: 复制代码 代码如下: evtEle.parent().next(".checks").find("input:checkbox").a
-
jquery 模拟类搜索框自动完成搜索提示功能(改进)
autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键
-
用jQuery模拟select下拉框的简单示例代码
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t
-
jQuery模拟下拉框选择对应菜单的内容
先给大家展示下效果图: 下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,a,p{margin
-
jQuery 文本框模拟下拉列表效果
网页代码如下: New Web Project $(document).ready(function(){ $('#test').val(''); //定义一个下拉按钮层,并配置样式(位置,定位点坐标,大小,背景图片,Z轴),追加到文本框后面 $DIV = $(' ').css('position', 'absolute').css('left', $('#test').position().left + $('#test').width() - 15 + 'px').css('top', $(
-
jquery模拟SELECT下拉框取值效果
jquery模拟SELECT框,效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty
-
用jQuery实现的模拟下拉框代码
很多群员问了关于下拉框美化的问题,现打一个下拉框美化的制作过程,其实是模拟出来的下拉框. 问题1:为什么要模拟下拉框? 1,浏览器自带的 下拉框样式不好看. 2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面. OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框. 第一步:先搭建好结构 这是普通的下拉框代码: XML/HTML代码 复制代码 代码如下: <select name="abc" id="abc"> <optio
-
jquery 模拟雅虎首页的点击对话框效果
这里说明下,这样的效果我们发过类似的效果.具体的可以到脚本下载中心查找. 效果图: 声明:我做的只是实现这个效果,在美观上并没有做到yahoo主页这么好看,所以不要介意! 原材料: 思路: 1:为每一个li标签添加悬浮事件 2:构建iframe并获取到当前li标签下的a元素的href属性值 3:构建DIV包含iframe元素并显示HTML结构: 复制代码 代码如下: <ul> <Li><a href="http://www.google.cn">新闻