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模板实现方法
Apr 27 Javascript
javascript Excel操作知识点
Apr 24 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JS中Array数组学习总结
Jan 18 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
JS轮播图的实现方法
Aug 24 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
详解python之简单主机批量管理工具
2017/01/27 Python
python读取二进制mnist实例详解
2017/05/31 Python
Python实现随机选择元素功能
2017/09/14 Python
python如何对实例属性进行类型检查
2018/03/20 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python字符串对象实现原理详解
2019/07/01 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
优秀实习自我鉴定
2013/12/04 职场文书
质量保证书范本
2014/04/29 职场文书
解除同居协议书
2015/01/29 职场文书
文言文辞职信
2015/02/28 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL