<!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. DataCommand和DataAdapter

    SqlDataReader 高效,功能弱,只读访问SqlDataAdapter 强大,要求资源也大一点 SqlDataReader 只能在保持跟数据库连接的状态下才可以读取... SqlDataAda ...

  2. 自定义Markdown例子

    主题1 正文字体 粗体 正文行内代码 斜体 int a = 2 /*代码块*/ /*杨韬的学习备忘录*/ private void CheckCloseFigure() { if (needClose ...

  3. LSTMs 长短期记忆网络系列

    RNN的长期依赖问题 什么是长期依赖? 长期依赖是指当前系统的状态,可能受很长时间之前系统状态的影响,是RNN中无法解决的一个问题. 如果从(1) “ 这块冰糖味道真?”来预测下一个词,是很容易得出“ ...

  4. Python制作AI贪吃蛇

    前提:本文实现AI贪吃蛇自行对战,加上人机对战,文章末尾附上源代码以及各位大佬的链接,还有一些实现步骤,读者可再次基础上自行添加电脑VS电脑和玩家VS玩家(其实把人机对战写完,这2个都没什么了,思路都 ...

  5. 剑指offer（25）复杂链表的复制

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  6. SVN冲突以及解决办法

    1.冲突原因: 假设 A.B 两个用户都在版本号为 100 的时候,更新了 kingtuns.txt 这个文件,A 用户在修改完成之后提交 kingtuns.txt 到服务器, 这个时候提交成功,这个 ...

  7. Learning-MySQL【2】：MySQL存储引擎及数据库的操作管理

    一.存储引擎 存储引擎实际上就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据.存储引擎也可以称为表类型. MySQL提供了插件式(pluggable)的存储引擎,存储引擎是基于表的.同一 ...

  8. Nginx教程--02.Nginx虚拟主机的配置

    1.Nginx虚拟主机的配置 1.1 在conf目录下,使用命令 : vim nginx.conf 对上图解释: //全局区 worker _processes 1; //表示当前有1个工作的子进程, ...

  9. Mac配置Hadoop最详细过程

    Mac配置Hadoop最详细过程 原文链接: http://www.cnblogs.com/blog5277/p/8565575.html 原文作者: 博客园-曲高终和寡 https://www.cn ...

  10. Bioconductor软件安装与升级

    1 安装工具Bioc的软件包不能使用直接install.packages函数,它有自己的安装工具,使用下面的代码: source("https://bioconductor.org/bioc ...