jquery使用ul模拟select实现表单美化的方法


Posted in Javascript onAugust 18, 2015

本文实例讲述了jquery使用ul模拟select实现表单美化的方法。分享给大家供大家参考。具体如下:

这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考。

运行效果截图如下:

jquery使用ul模拟select实现表单美化的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ul模拟select</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
<!--
.select_box {width:150px; position:relative; margin:10px;padding:0; font-size:12px;}
.submit_box {width:180px; position:relative; margin:10px;padding:0; font-size:12px; text-align:center;}
ul,li {list-style-type:none; padding:0; margin:0}
.select_box input {cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;border:1px solid #ccc; padding-right:20px; padding-left:10px; background:url(select_input_bg.gif) no-repeat 160px center;}
.select_box ul {width:180px; position:absolute; left:0; top:25px; border:1px solid #ccc; background:#fff; overflow: hidden;display:none; background:#ebebeb; z-index:99999;}
.select_box ul li {display:block;height:30px;overflow:hidden;line-height:30px;padding-left:5px;width:100%;cursor:pointer;}
.hover {background:#ccc;}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
 $(".select_box input").click(function(){
  var thisinput=$(this);
  var thisul=$(this).parent().find("ul");
  if(thisul.css("display")=="none"){
   if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })};
   thisul.fadeIn("100");
   thisul.hover(function(){},function(){thisul.fadeOut("100");})
   thisul.find("li").click(function(){thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
   }
  else{
   thisul.fadeOut("fast");
   }
 })
 $("#submit").click(function(){
  var endinfo="";
  $(".select_box input:text").each(function(i){
   endinfo=endinfo+(i+1)+":"+$(this).val()+";\n";        
  })       
  alert(endinfo);      
 })
});
</script>
</head>
<body>
 <div class="select_box"><input id="myselect" type="text" value="请选择..." readonly="readonly">
  <ul class="select_ul">
   <li>选项一</li>
   <li>选项二</li>
   <li>选项三</li>
   <li>选项四</li>
   <li>选项五</li>
  </ul>
 </div>
 <div class="select_box"><input id="myselect" type="text" value="请选择..." readonly="readonly">
  <ul class="select_ul">
   <li>选项一</li>
   <li>选项二</li>
  </ul>
 </div>
 <div class="select_box"><input id="myselect" type="text" value="请选择..." readonly="readonly">
  <ul class="select_ul">
   <li>选项一</li>
   <li>选项二</li>
   <li>选项三</li>
   <li>选项四</li>
   <li>选项五</li>
   <li>选项一</li>
   <li>选项二</li>
   <li>选项三</li>
   <li>选项四</li>
   <li>选项五选项五选项五选项五选项五</li>
  </ul>
 </div>
 <div class="submit_box"><input type="button" id="submit" value="提交数据" /></div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
Vue实现购物车功能
Apr 27 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
jQuery实现的漂亮表单效果代码
Aug 18 #Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
You might like
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
use jscript List Installed Software
2007/06/11 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
对于Python深浅拷贝的理解
2019/07/29 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python利用opencv保存、播放视频
2020/11/02 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
MYSQL基础面试题
2012/05/13 面试题
物业公司采购员岗位职责
2013/12/31 职场文书
培训演讲稿范文
2014/01/12 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
国际贸易专业求职信
2014/06/04 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
晚会主持人开场白台词
2015/05/28 职场文书