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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
小程序实现投票进度条
Nov 20 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
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
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
javascript工具库代码
2012/03/29 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
python实现dict版图遍历示例
2014/02/19 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
简单了解python单例模式的几种写法
2019/07/01 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
服装机修工岗位职责
2013/12/26 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
数学教师求职信范文
2015/03/20 职场文书
终止劳动合同通知书
2015/04/16 职场文书
电影雷锋观后感
2015/06/10 职场文书