模仿select下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
list-style:none;
margin: 0;
padding: 0;
text-decoration: none;
}
.box_lx{
width: 100px;
text-align: center;
font-size: 12px;
}
.box_lx .l_title{
width: 100%;
padding: 5px 0;
border: 1px solid #999;
position: relative;
font-size: 14px;
}
.list_box{
width: 100%;
padding: 5px 0;
border: 1px solid #999;
border-top: 1px solid transparent;
display: none;
}
.list_box ul li{
padding: 5px 0;
}
.list_box ul li:hover{
background-color: #FFB2B2;
color: #fff;
cursor: pointer;
}
.l_title span{
display: inline-block;
position: absolute;
top: 50%;
right: 5px;
width: 0;
height: 0;
margin-top: -3px;
border-top: 5px solid #ccc;
border-right: 5px solid rgba(204, 204, 204, 0.02);
border-left: 5px solid rgba(204, 204, 204, 0.02);
border-bottom: 5px solid rgba(204, 204, 204, 0.02);
}
</style>
</head>
<body>
<ul class="box_lx">
<li class="l_title">
<s>中国</s>
<span></span>
</li>
<li class="list_box">
<ul>
<li>中国1</li>
<li>中国2</li>
<li>中国3</li>
<li>中国4</li>
<li>中国5</li>
<li>中国6</li>
<li>中国7</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(".l_title").click(function(){
$(".list_box").css("display","block");
})
$(".list_box ul li").click(function(){
var Text=$(this).text();
$(".l_title s").text(Text);
$(".list_box").css("display","none");
})
</script>
</html>
模仿select下拉列表的更多相关文章
- jQuery还原select下拉列表和清空input的值,回显下拉列表框的值
实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...
- 详细的<select>下拉列表详解
我们使用表单下拉列表选择数据,如省.市.县.年.月等数据,我们即可使用下拉菜单表单进行设置.select 我下拉列表菜单标签Option为下拉列表数据标签Value 为Option的数据值(用于数据的 ...
- iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...
- ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...
- 如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法（让你真正理解ajax）
ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...
- select下拉列表js操作兼容性问题分享
做一个下拉列表鼠标移入改变对应的图片的值, $("select").mosover(function(){ //var i=$(this).find("selected& ...
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）
ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- 关于angularjs的select下拉列表存在空白的解决办法
angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option ng-repeat></option>option中 ...
随机推荐
- sql 小技巧
declare @pids varchar(max)='' ),pid)+','+@pids from product where pname like '%red%' select @pids
- 面试(I)
即时通讯 为什么要TCP连接建立3次? 假设是2次: 假如在第1次客户端向服务器端发送请求因为阻塞,客户端会再次给服务器端发送请求,这次服务器端和客户端建立了连接.这样双方就可以发送数据了,发送完以后 ...
- 《CSS世界》读书笔记（三） --width:auto
<!-- <CSS世界> 张鑫旭著 --> width:auto width:auto至少包含了以下4种不同的宽度表现: 充分可利用空间.比方说,<div>.&l ...
- Linux 安装vsftpd和ftp客户端
1.下载安装包:ftp-0.17-54.el6.x86_64.zip和vsftpd-2.2.2-11.el6_4.1.x86_64.zip 可以直接在Linux底下用yum install vsftp ...
- java SE学习过程中的知识点小结（一）（很多内容过于基础，希望能帮助到学习路上的同学）————欢迎老手批评指正
①.把boolean测试放在括号内:例如while(x==4){} //当然看过很多博客,里面有工作经验的工作者说以后公司可能习惯性写(4==x) ②.所有java程序都定义在类中(也是区别于C++ ...
- Dart编程语言入门
Dart基础入门语法介绍,详细说明可以查看相关视频<Dart编程语言入门>. 变量与常量 变量 1.使用 var 声明变量,默认值为 null var a;//null a = 10; 2 ...
- Link-Cut-Tree详解
图片参考YangZhe的论文,FlashHu大佬的博客 Link-Cut-Tree实际靠的是实链剖分,重链剖分和长链剖分珂以参考树链剖分详解 Link-Cut-Tree将某一个儿子的连边划分为实边,而 ...
- 【Alpha】Scrum Meeting 2
前言 第2次会议在3月28日由PM在教一317召开. 主要确定了项目方向和目标功能,进行了任务分工.时长60min. 任务分配 姓名 当前阶段任务 下阶段任务 吴昊 熟悉代码和配置环境,发布手机端博客 ...
- _luckdraw
该表可以控制进行抽奖.10连抽: `comment` 备注 `itemId` 物品ID `chance`几率 `itemCount` 数量
- JAVA静态&动态代理
具体场景 为了使代理类和被代理类对第三方有相同的函数,代理类和被代理类一般实现一个公共的interface,该interface定义如下 public interface Calculator { p ...