<!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. Interesting (manacher + 前缀和处理)

    题意:相邻的两端回文串的价值为两个回文串总的区间左端点 × 区间右端点.然后计算目标串中所有该情况的总和. 思路:首先用manacher求出所有中心点的最大半径,然后我们知道对于左区间我们把贡献记录在 ...

  2. Scala 偏函数

    如果你想定义一个函数,而让它只接受和处理其参数定义域范围内的子集,对于这个参数范围外的参数则抛出异常,这样的函数就是偏函数(顾名思异就是这个函数只处理传入来的部分参数). 偏函数是个特质其的类型为Pa ...

  3. [openjudge-动态规划]鸣人的影分身

    题目描述 描述 在火影忍者的世界里,令敌人捉摸不透是非常关键的.我们的主角漩涡鸣人所拥有的一个招数--多重影分身之术--就是一个很好的例子. 影分身是由鸣人身体的查克拉能量制造的,使用的查克拉越多,制 ...

  4. 记录Js 文本框验证 与 IE兼容性

    最近的日常就是将测试小姐姐提交的bug进行修改,想来这种事情还是比较好开展的,毕竟此项目已上线一年多,现在只是一些前端的问题需要改正.实际上手的时候并不是这样,原项目是在谷歌上运行,后来由于要新增一个 ...

  5. spring 获取对象的注解

    BeanDefinition definition = registry.getBeanDefinition(name); if (definition instanceof AnnotatedBea ...

  6. Linux VNC server 安装配置

    1.安装vnc server [root@pxe ~]# yum install tigervnc-server -y   2.设置 vnc server 开机启动 [root@pxe ~]# chk ...

  7. java static语句的总结

    static 是静态方法,他的引用不需要对象,可以使用类名直接进行引用,当然也不需要this.      由于不需要对象,所以static方法内无法调用非static的方法或对象   至于为什么mai ...

  8. Node.js学习准备篇

    这里写个Node.js 准备篇包含内容有node.js 的安装,命令行运行node.js 文件,使用webStrom 编写 node.js 时有提示功能,并用webStrom 运行 Node.js 其 ...

  9. 【 记忆网络 1 】 Memory Network

    2015年,Facebook首次提出Memory Network. 应用领域:NLP中的对话系统. 1. 研究背景 大多数机器学习模型缺乏一种简单的方法来读写长期记忆. 例如,考虑这样一个任务:被告知 ...

  10. Python引用拷贝赋值

    先安利一个网站,对学习编程很有帮助:http://www.pythontutor.com/ 可以逐行可视化执行代码,具体自行体验啦 这个网站也是我在看别人的博文时候找到的,也先贴上别人的理解吧,我觉得 ...