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 相关文章推荐
用方法封装javascript的new操作符(一)
Dec 25 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 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
我常用的几个类
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
python先序遍历二叉树问题
2017/11/10 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python放大图片和画方格实现算法
2018/03/30 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
如何利用find命令查找文件
2015/02/07 面试题
安全标语口号
2014/06/09 职场文书
2014年国庆标语
2014/06/30 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
python基础之匿名函数详解
2021/04/21 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python