<!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下拉列表的更多相关文章

  1. jQuery还原select下拉列表和清空input的值,回显下拉列表框的值

    实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...

  2. 详细的<select>下拉列表详解

    我们使用表单下拉列表选择数据,如省.市.县.年.月等数据,我们即可使用下拉菜单表单进行设置.select 我下拉列表菜单标签Option为下拉列表数据标签Value 为Option的数据值(用于数据的 ...

  3. iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

    网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...

  4. ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

  5. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  6. JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法（让你真正理解ajax）

    ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...

  7. select下拉列表js操作兼容性问题分享

    做一个下拉列表鼠标移入改变对应的图片的值, $("select").mosover(function(){ //var i=$(this).find("selected& ...

  8. JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）

    ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...

  9. 关于angularjs的select下拉列表存在空白的解决办法

    angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option  ng-repeat></option>option中 ...

随机推荐

  1. Maven pom.xml详解（转）

    pom文件总体结构 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  2. SQL SEVER 的基本请求指令

    SQL分类:DDL--数据定义语言(create,alter,drop,declare) DML--数据操纵语言(select,delete,update,insert) DCL--数据控制语言(gr ...

  3. js实现复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  4. 面向对象select方法

    <?php class Table{         protected $tablename;         protected $arrTable;        protected $w ...

  5. centos7.3配置python2、3环境与配置各自pip

    环境:CentOS-7-x86_64-Everything-1611 No.1 查看CentOS对Python的默认依赖 [root@cs ~]# ls /usr/bin/python* /usr/b ...

  6. Python爬虫(四)——豆瓣数据模型训练与检测

    前文参考: Python爬虫(一)——豆瓣下图书信息 Python爬虫(二)——豆瓣图书决策树构建 Python爬虫(三)——对豆瓣图书各模块评论数与评分图形化分析 数据的构建 在这张表中我们可以发现 ...

  7. 02：golang基础

    1.1 golang中的init函数和main函数 1.init函数和main函数 1. golang里面有两个保留的函数:init函数(用于所有package)和main函数(只能用于package ...

  8. ssh hibernate修改数据库

     org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in rea ...

  9. js Array​.prototype​.reduce()

    例子: , , , ]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 ...

  10. Nginx 配置负载均衡

    nginx负载均衡配置,主要是proxy_pass,upstream的使用. 注意问题,多台机器间session的共享问题. 不用session,用户cookie.或者用redis替代session. ...