下拉框选择

1,简单下拉框

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" ><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style type="text/css">ul{padding: 0;margin:0;}ul li{height: 25px;line-height:25px;list-style: none;border: 1px solid #ccc;}</style>
</head>
<body><div class="wrap"><div class="tg-select" ><input value="请选择" readonly="readonly" type="text"><ul style="display: none;"><li data-value="1">1</li><li data-value="2">2</li><li data-value="3">3</li><li data-value="4">4</li></ul></div>		</div><script>$('.tg-select').click(function(){$(this).find('ul').toggle();})$('.tg-select li').click(function(){var val=$(this).text();$(this).parents('.tg-select').find('input').val(val);})</script>
</body>
</html>

2,带遮罩层的下拉框选择

 

 

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" ><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style type="text/css">*{padding: 0;margin: 0;}.input_select{width:150px; height:24px; line-height:24px;}#dropdown{width:170px;position:relation;}.drop-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:99;display:none;}#dropdown ul{position:absolute;display:none;width: 100%;left: 0;bottom: 0;z-index:100;}#dropdown ul li{background:#fff;text-align:center;height:30px;line-height:30px;min-height:30px;width:auto;border-bottom: 1px solid #d4d4d4;}#dropdown ul li a{display:block;  color:#807a62; text-decoration:none} #dropdown ul li a:hover{background:#f4f4f4; color:#369} </style>
</head>
<body><div class="drop-mask"></div> <span><div id="dropdown"> <input readonly class="frameOrEngine input_select" type="text"  placeholder="请输入选中数" />                         <ul> <li><a rel="4">4</a></li> <li><a rel="5">5</a></li> <li><a rel="6">6</a></li> <li><a rel="7">7</a></li><li><a rel="8">8</a></li> <li><a rel="9">9</a></li>  </ul>                             </div>                     </span> <script>    $(".input_select").click(function(){ var ul = $("#dropdown ul"); if(ul.css("display")=="none"){ ul.slideDown("fast"); $(".drop-mask").show();}else{ ul.slideUp("fast"); $(".drop-mask").hide();} });$("#dropdown ul li a").click(function(){ var txt = $(this).text(); $(".input_select").val(txt); $("#dropdown ul").hide(); $(".drop-mask").hide();});                    </script>    
</body>
</html>

 

转载于:https://www.cnblogs.com/lvziyan/p/5916608.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于C#的TCP/IP协议应用(一)

一、背景与概念 1.标准以太网 以太网是美国Xerox&#xff08;施乐&#xff09;公司的Palo Alto研究中心于1975年研制成功的&#xff0c;其核心技术起源于ALOHA网。目前以太网是指符合IEEE 802.3标准的局域网(LAN)产品组&#xff0c;其中IEEE 802.3是一组电气与电子工程师协会…

WORD文档的超链接无法打开——“由于本机的限制该操作已被取消”的解决方法

之前我电脑还很正常&#xff0c;最近装了一个打印机后&#xff0c;放在word文档的文字超链接就打不开了&#xff0c;提示说“由于本机的限制该操作已被取消”&#xff0c;请各位高手指导下该怎样解决这个问题&#xff1f; WORD文档的超链接无法打开的原因是文件在插入超链接之…

广义表的实现

广义表是一种非线性表的数据结构&#xff0c;是线性表的一种推广。他放松了对原子的控制&#xff0c;容许原子有自身的结构。其实现如下&#xff1a; #include<iostream>using namespace std;#include<assert.h>enum Type //原子类型有三种:头结点&#xff0c…

C#中List列表与Datagridview的用法

初始化 创建空列表 List<int> List new List<int>();2.使用var类型的前提是预先知道变量的类型&#xff0c;会根据变量赋值来判定属于什么类型&#xff0c;但此种赋值方法只能给局部变量赋值。 var list1 new List<string>();具体见&#xff1a; C#列表L…

Byte和byte[]数组

Byte和byte[]数组&#xff0c;“表示一个 8 位无符号整数, 一般为8位二进制数”。 Byte是计算机最基础的存储单位和最基础的通讯单位。 而所有的类型都是支持由byte[]类型转换而来。 为什么说Byte是最基础类型那&#xff0c; 其实这里的关键所在是&#xff0c;计算机最基础的算…

【图像处理】——opencv常用函数

目录 读取图像 注意: 1、imread和plt.show以及pil.image,show的区别: 2、imread中的rgb的顺序 显示图像

网络协议:TCP/IP、SOCKET、HTTP

网络七层 由下往上分别为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。其中物理层、数据链路层和网络层通常被称作媒体层&#xff0c;是网络工程师所研究的对象&#xff1b;传输层、会话层、表示层和应用层则被称作主机层&#xff0c;是用户所面向和关心的内…

halcon自标定

概念 该算法可以在不使用标定板的情况下计算相机内参&#xff0c;从而进行畸变校正&#xff0c;适用于畸变较大的情况。算法很简单&#xff1a; 1.求出图像边缘应进行分割。 2.基于筛选线段的自标定radial_distortion_self_calibration。 3.得到标定区域。 4.根据指定的径向畸…

jdk动态代理

简单的说&#xff0c;代理模式是在目标对象和访问对象之间增加了一层代理对象&#xff0c;所有的访问对象通过代理对象来实现对目标对象的调用。 代理对象和目标对象实现同一个接口&#xff0c;由代理对象来调用目标对象&#xff0c;对于外部来说&#xff0c;代理对象就可以替代…

【图像处理】——图像的灰度化处理(Python实现三种方法——最大值法、平均值法、加权均值法、gamma校正)

目录 一、什么是图像的灰度化? 二、灰度化的几种方法(最大值法、平均值法、加权均值法、gamma校正)

配置https

引子&#xff1a; 最近在一篇文章中了解到EFF(电子前哨基金会)为了推广https协议&#xff0c;成立了一个letsencrypt项目&#xff0c;可以发放免费的证书&#xff0c;此证书可以被大多数主流浏览器所信任&#xff0c;这个邪恶的念头一爆发&#xff0c;就让我走上了一条坎坷的不…

C# —— 序列化与反序列化

概念 序列化 通过使用不同的类(BinaryFormatter,SoapFormatter,XmlSerializer)将对象状态转换为可保持或传输的格式的过程,具体是将对象转变为字节流,其目的是为了保存数据的状态,方便后续还原调用。包括三种序列化形式:二进制序列化,SOAP序列化,XML序列化。于此过…

CentOS 6.5安装VNC server

1. 安装桌面&#xff0c;安装时选择了Desktop可以忽略 # yum groupinstall Desktop # yum install gnome-core xfce4 firefox 2. 安装VNC server # yum install tigervnc-server 3. 配置服务 # chkconfig vncserver on 4. 设置VNC用户密码 # vncpasswd 5. 配置文件 # vi /etc/s…

【图像处理】——图像灰度直方图的绘制(直接调用函数和自定义函数)

目录 一、灰度直方图概念 二、直接调用opencv的函数caclHist() 1、函数介绍 2、实例 <

Codeforces 722C. Destroying Array

C. Destroying Arraytime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutputstandard outputYou are given an array consisting of n non-negative integers a1, a2, ..., an. You are going to destroy integers in the array one by o…

C#中数据类型及其转换知识点汇总

概念 C#中数据类型分为两大类&#xff0c;分别是值类型和引用类型。 值类型变量是从类 System.ValueType 中派生出来的&#xff0c;当声明一个值类型变量时&#xff0c;系统分配内存来存储值。 整形 包括8种类型&#xff0c;区别在于字节数和有无符号。 浮点型 float占用…

10亿个字符串的排序问题

一、问题描述 有一个大文件&#xff0c;里面有十亿个字符串&#xff0c;乱序的&#xff0c;要求将这些字符串以字典的顺序排好序 二、解决思路 将大文件切割成小文件&#xff0c;每个小文件内归并排序&#xff1b; 对所有的小文件进行归并排序——多重归并排序 三、解决方案 3.…

MVC学习IIS的不同版本(一)

一&#xff1a;IIS5.0运行在进程InetInfo.exe中&#xff0c;该进程寄宿着一个名为World Wide Publishing Service&#xff08;W3VC&#xff09;的window服务。 W3VC的主要功能&#xff1a;包括HTTP请求的监听、工作进程和配置管理 检测到HTTP 请求时&#xff1a; 根据扩展名判断…

Halcon中visualize_object_model_3d算子详解

概念 此函数用于显示3d模型。该函数功能很多,包括设置位姿,颜色,鼠标翻转、缩放、平移,选择和取消选择目标,降低鼠标灵敏度,切换检查模式等。 参数 visualize_object_model_3d( : : WindowHandle, ObjectModel3D, CamParam, PoseIn, GenParamName, GenParamValue, Tit…