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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
Apache设置虚拟WEB
2006/10/09 PHP
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
JQuery筛选器全系列介绍
2013/08/27 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
领导失职检讨书
2014/02/24 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
关于环保的演讲稿
2014/05/10 职场文书
教师演讲稿开场白
2014/08/25 职场文书
代收款委托书范本
2014/10/01 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android