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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 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
PHP URL参数获取方式的四种例子
2014/02/28 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
行政人员岗位职责
2013/12/08 职场文书
财产公证书
2014/04/10 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
毕业生入职感言
2015/07/31 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python