jquery使用ul模拟select实现表单美化的方法

本文实例讲述了jquery使用ul模拟select实现表单美化的方法。分享给大家供大家参考。具体如下：

这里使用jquery实现ul模拟select，是jQuery插件实现的Select下拉菜单效果，类似的功能网上已经有一些了，每一款都代表了不同的编程思路，为学习提供一份参考。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery模拟实现的select点击选择效果【附demo源码下载】

    jQuery模拟实现的select点击选择效果【附demo源码下载】

    本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修

  • jQuery Select(单选) 模拟插件 V1.3.62 改进版

    首先感谢jQuery.Select.js的作者张经纬,jQuery.Select.js项目地址:http://www.zhangjingwei.com/archives/jquery-select%E5%8D%95%E9%80%89-%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6-v1-3-6/  项目中需要使用基于jQuery的Select模拟效果,主要是想实现select的onmouseover事件,而不需要点击在经过时即可进行选择,找了很多没有理想的,最后决定在j

  • 用jQuery模拟select下拉框的简单示例代码

    用jQuery模拟select下拉框的简单示例代码

    很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • JQuery SELECT单选模拟jQuery.select.js

    基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是,原来的zhangjingwei的模拟在显示方式上的问题.在跟文字交替出现时会出现错位.现将模拟DIV的display修改为inline方式.更自然的嵌入到文本行中. b.在加载文件后自动转化样式名为'commonselect' 的select.简化调用 c.对select的o

  • 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)

    具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google . 另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈. 演示及代码:  演示代码 代码下载运行代码: 用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96

  • jQuery模拟select实现下拉菜单功能

    jQuery模拟select实现下拉菜单功能

    用jquery模拟一淘上面的搜索下拉的功能,利用css3做箭头的动画效果. JS代码: /* * 模拟搜索下拉select * 默认调用方式:$(el).setSelect({ * optionList: [], //这里是下拉的选项,如['aa','bb'] * hiddenInput: '#optionHidden', //隐藏的input获取选中后的值,供表单提交时传值 * getOption: '#sOptionBtn', * callback: function(option){} *

  • jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT下拉框取值效果

    jquery模拟SELECT框,效果图如下:   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty

  • 使用CSS和jQuery模拟select并附提交后取得数据的代码

    使用CSS和jQuery模拟select并附提交后取得数据的代码

    模拟select 并带有提交后取得数据的代码  HTML Code 复制代码 代码如下: <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#" rel="2">北京</a></li> <li><a href="#" rel="3">上海

  • jquery使用ul模拟select实现表单美化的方法

    jquery使用ul模拟select实现表单美化的方法

    本文实例讲述了jquery使用ul模拟select实现表单美化的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • jQuery Validate让普通按钮触发表单验证的方法

    一般的表单校验都是直接注册在页面上的匿名函数,导致只能通过固定的提交方式触发表单校验,如果想自定义一个按钮触发表单校验如何实现呢? 目前写法: $(function(){ $("#form").validate({ rules : { user_name : { required : true }, -- }, messages : { user_name : { required : '用户名必填', }, -- } }); }); 改写方法: //编写表单验证函数validform

  • Python实现模拟登录及表单提交的方法

    本文实例讲述了Python实现模拟登录及表单提交的方法.分享给大家供大家参考.具体实现方法如下: # -*- coding: utf-8 -*- import re import urllib import urllib2 import cookielib #获取CSDN博客标题和正文 url = "http://blog.csdn.net/[username]/archive/2010/07/05/5712850.aspx" sock = urllib.urlopen(url) ht

  • Jquery Validation插件防止重复提交表单的解决方法

    由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮.CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码.代码如下: js: 代码 复制代码 代码如下: function disableBtn(btnID, newText) { Page_IsValid = null; if (typeo

  • jquery+css+ul模拟列表菜单具体实现思路

    jquery+css+ul模拟列表菜单具体实现思路

    复制代码 代码如下: <!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=&qu

  • JavaScript/jQuery 表单美化插件小结

    JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi

  • Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

  • 巧用jQuery选择器提高写表单效率的方法

    相信很多小伙伴都会遇到需要做表单的需求,就像我现在做的医院项目,茫茫多的表单无穷无尽.一开始做表单使用最笨的方法:一个个span去定义ID,每个数据都用ajax获取后赋值显示,然后在表单提交前一个个用jQuery根据ID获取元素的value,组成一个model来提交给服务器. 后来发现使用jQuery可以大大简化这个过程.于是我修改了工作方法,总结了我的一些提高写表单效率的方法. 需求 表单中存在最多的无非就是文本.文本框.单选框.多选框.而一些表单中会有几十个甚至几百个选项.我们的目标就是以最

  • jQuery表单美化插件jqTransform使用详解

    jQuery表单美化插件jqTransform使用详解

    jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+,插件还是很不错的,使用起来也很简单,推荐学习和使用. 使用方法: 1.加载jQuery和插件 <script type="te

随机推荐