jq模仿select下拉框

最新推荐文章于 2018-06-23 13:44:00 发布
最新推荐文章于 2018-06-23 13:44:00 发布
阅读量4.9k 收藏
点赞数
分类专栏： HTML 文章标签： select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joyhen/article/details/11609115
版权 
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    	$(function(){
			$("#ddlText").click(function(){
				event.stopPropagation();
				var p=$(this);
				//alert(p.width());
				var _offset = p.offset();
				$(this).next(".ddlul").css("width",(p.width()+10)+"px").show("fast",
					function(){//set item selected class
						var lia=p.prev("input[type=hidden]").val();
						if($.trim(lia)!=""){					
							$(".ddlul li").each(function() {
								if($(this).attr("livalue")==lia){
									$(this).find("a").addClass("libg");	
								}else{$(this).find("a").removeClass("libg");}
							});
						}
					}
				).offset({ top: (_offset.top() + p.height() -2), left: _offset.left() });	
				
				$(this).next(".ddlul li").bind("hover",function(){
					$(this).addClass("libg").siblings().removeClass("libg");
				})
			});
			
			$(document).click(function(event)  { 
				var eo  =  $(event.target); 
				if($(".ddlul").is(":visible") && eo.attr("class") != "ddlul" && !eo.parent(".ddlul").length) {
					$('.ddlul').hide("fast"); 
				}
			});	
		
			$(".ddlul li").live("click",function(event){
				$(this).parent().prev("span").text($(this).find("a").html());
				$(this).parent().prev().prev("input[type=hidden]").val($(this).attr("livalue"));
			})	
		})
	</script>
	<style type="text/css">
		.ddlspan{ background-color:#fff; color:#333; width:190px; height:24px; line-height:24px; padding-left:10px;
				border:1px solid #666; cursor:pointer; font-size:14px; display:block;}
		
		ul.ddlul{ margin:0; padding:0; background-color:#FFF; position:relative; border-left:1px solid #666;border-right:1px solid #666;
					border-bottom:1px solid #666; list-style:none; z-index:10001; display:none;}
		.ddlul li{ margin:0; padding:0; height:23px; line-height:23px; width:inherit; cursor:pointer;}
		.ddlul li a{ text-decoration:none; color:#333; display:block;}
		.ddlul li a:hover{ text-decoration:none; background-color:#FCF;}		
		.libg{ background-color:#FCF;}
	</style>
</head>

<body>
	<div style="width:300px; margin:0 auto; margin-top:120px;">
   		<div>
        	<input type="hidden" id="hid_ddlText" value="2" />
       		<span id="ddlText" class="ddlspan">选项二</span>
         	<ul class="ddlul" tagdom="ddlText">
             <li livalue="1"><a>选项一</a></li>
             <li livalue="2"><a>选项二</a></li>
             <li livalue="3"><a>选项三</a></li>
             <li livalue="4"><a>选项四</a></li>
             <li livalue="5"><a>选项五</a></li>
          	</ul>   
       </div>    	
    </div>

</body>
</html>

joyhen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery模拟实现仿select效果
卡布洛技术专栏
07-14 7629
本着服务为人民的远大理想，最近写了个jquery模拟select效果的小东东，挺好用，分享下。 可以直接在我上传的资源里下载压缩包，下载地址：jquery模拟实现仿select效果。 首先，上html页面代码 js模拟select 省份 北京 河北省 山东省 城市
JQ高仿select控件
07-21
<div style="padding:100px;"> <p>JQ高仿select控件</p> <br/><br/> <div style="height:100px;border-bottom:5px solid #ff0000;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td> <div class="diyselect" id="cs1"> <ul class="hidden"> <li>张三</li> <li>李四</li> <li>王二麻子</li> </ul> </div> </td> <td width=20></td> <td> <div class="diyselect" id="cs2"> <ul class="hidden"> <li>运营部</li> <li selected="selected">设计部</li> <li>客服部</li> </ul> </div> </td> </tr> </table> </div> </div>
jquery模拟select效果实现
07-14
Jquery模拟select效果实现，纯自写，简单实用，可自行修改样式。
jQuery仿微信自定义菜单自适应手机底部的弹出菜单
09-20
jQuery仿微信自定义菜单自适应手机底部的弹出菜单，很好的样式效果
jQuery div仿select下拉选项菜单美化获取html
11-19
jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html
jQuery操作select下拉框的text值和value值的方法
12-08
1、jquery获取当前选中select的text值 var checkText=$(“#slc1”).find(“option:selected”).text(); 2、jquery获取当前选中select的value值 var checkValue=$(“#slc1”).val(); 3、jquery获取当前选中select的...
JS Select下拉框(支持输入模糊查询)
10-20
主要为大家详细介绍了JS Select下拉框的相关资料，支持输入模糊查询，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery模拟select下拉框插件
06-24
jQuery模拟select下拉框插件是一款支持多选和单选下拉框菜单选中代码。
微信小程序select下拉框实现
10-16
主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jquery取消选择select下拉框示例代码
12-09
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿………. 下面是三个select: 代码如下:<select name=”pWaqqqy” id=”sel_type” onchange=”...
jquery仿微信自定义二级下拉菜单设置功能
10-05
jquery仿微信自定义二级下拉菜单设置功能
jQuery手机下拉框select
11-03
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
Div实现仿SelectDemo
05-02
非常好用的Select插件，通过制作的jQ插件快速生成Selcet 前台界面只需要一个div元素，其他的可以通过插件的API进行数据的填充与获取，demo中都有具体事例
CSS+jQuery 下拉菜单(仿select)
alex的博客
09-07 1016
html<div id="select_box"> <dl id="types"> <dt><span id="select_type">请选择</span></dt> <dd>百货</dd> <dd>生活用品</dd> <dd>电脑外设</dd> <dd>数码产品</dd> </dl> </div>cs
jQuery 制作美化版的 select 下拉选框
FungLeo's Blog
11-04 1952
jQuery 制作美化版的 select 下拉选框前言在web前端工作中，总有一些东西是你搞不定的，比如 select 。原生的这玩意儿难看咱就不说了，关键是，在各个浏览器里面的表现形式那是千差万别啊。所以，我们在日常的工作中，总是尝试去美化它。我烦了。所以，我决定写一段js来彻底解决这个问题。思路 用 input 文本框来传值。 禁止其输入功能。 用 ul li 来模拟下拉菜单。 用 data 来
jq模仿下拉菜单select
weixin_30642869的博客
06-23 176
今天公司app ios版内测，发现select在安卓和ios上样式不统一，并且不好修改，一气之下放弃使用select，手写了一个用div模仿select的模块 话不多说上代码 //样式 .zezhao { width: 100%; height: 800px; background-color: rgba(0, 0, 0, 0.7); position: fixed;...
利用jquery高仿select下拉菜单效果
dupeidong1215的博客
03-24 1348
高仿select下拉菜单效果               body,div,p,i,ul,span,a{margin:0;padding:0;}     body{font-family:"微软雅黑";padding-left:100px;padding-top:100px;}.mr-20{margin-right:20px;}ul,ol{list-style:none;}a{
mobiscroll实践：移动端仿苹果select效果的实现
向上爬的蜗牛
12-09 1万+
最近在做一个微信服务号的开发，设计中日期选择和周期选择的输入框需要使用苹果的select下拉效果，在网上折腾了好久，最终的感慨就是这事基本上只有mobiscroll能搞定，然后专心死磕mobiscroll咯。 首先这个插件是需要收费的，官网提供15天的试用期，但是需要填写信用卡，随便编了几下结果没通过审核，只得作罢，在网上搜mobiscroll实践的博客，也是各种折腾各种坑。首先是大家用m
HTTP X-Frame-Options 防止iframe内框架调用
热门推荐
每天进步一点点
01-29 2万+
X-Frame-Options response header 可用于指示是否应该允许浏览器呈现在一个页面  或 中. 以确保网站内容是不是嵌入到其它网站.      X-Frame-Options" content="SAMEORIGIN / DENY ">  X-Frame-Options     使用X-Frame-Options 有两种可能的值：  DENY ：该
el-select 下拉框
最新发布
09-20
el-select 下拉框是一个基于Element UI框架提供的组件，用于实现下拉选择的功能。通过el-select可以实现以下操作： - 添加搜索属性：使用filterable属性可以将下拉框设置为可搜索的，用户可以输入关键字进行筛选。 -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值