js实现自定义下拉框
本文实例为大家分享了js实现自定义下拉框的具体代码，供大家参考，具体内容如下
实现思路：
(1)创建一个列表和一个span之类的标签（那个标签都可以），
(2)列表的每一项分别绑定点击事件，点击那一项就把span内容变为改那一项内容，然后隐藏列表。
(3)列表要先隐藏，点击span标签再让它显示，什么都不选时点击document隐藏列表。
(4)键盘上的按键都有各自的键码，通过这个键码可以来判断按下的是哪个键来执行相应的操作，下面函数可以获取键盘的键码
document.addEventListener("keyup",function(e){
console.log(e.keyCode)
})
核心代码：键盘上的向上，向下，enter键触发的内容
//键盘按下事件
document.addEventListener("keyup",function(e){
var e=e||window.e;
reset()
//向上键
if(e.keyCode=="38"){
index--;
if(index<0){
index=list.length-1
}
}
//向下键
if(e.keyCode=="40"){
index++;
if(index>list.length-1){
index=0
}
}
//enter确认键
if(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="none";
return ;
}
list[index].className="bg";
})
全部代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body,
ul,
li {
margin: 0;
padding: 0;
font-size: 13px;
}
ul,
li {
list-style: none;
}
.divselect {
width: 186px;
margin: 80px auto;
position: relative;
z-index: 10000;
}
.divselect cite {
width: 150px;
height: 24px;
line-height: 24px;
display: block;
color: #807a62;
cursor: pointer;
font-style: normal;
padding-left: 4px;
padding-right: 30px;
border: 1px solid #333333;
}
.divselect ul {
width: 184px;
border: 1px solid #333333;
background-color: #ffffff;
position: absolute;
z-index: 20000;
margin-top: -1px;
display: none;
}
.divselect ul li {
height: 24px;
line-height: 24px;
}
.divselect ul li a {
display: block;
height: 24px;
color: #333333;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
.divselect ul li:hover{
background: #eee;
}
.bg{
background: #eee;
}
</style>
</head>
<body>
<div class="divselect">
<span>请点击选择分类</span>
<ul>
<li>
<a href="javascript:;">ASP开发</a>
</li>
<li>
<a href="javascript:;">.NET开发</a>
</li>
<li>
<a href="javascript:;">PHP开发</a>
</li>
<li>
<a href="javascript:;">Javascript开发</a>
</li>
<li>
<a href="javascript:;">Java特效</a>
</li>
</ul>
</div>
<script type="text/javascript">
var cite=document.querySelector("span"),//选择的内容
ul=document.querySelector("ul"),//列表
list=document.querySelectorAll("a"),//选择项
index=-1;//索引
//点击列表显示
cite.addEventListener("click",function(e){
var e=e||window.e;
e.stopPropagation();//阻止冒泡防止触发document上绑定的隐藏事件
ul.style.display="block";
})
//给每个列表项绑定点击
for(var i=0;i<list.length;i++){
list[i].onclick=function(){
cite.innerHTML=this.innerHTML;
ul.style.display="none";//这里隐藏可以不写，不写冒泡到document上触发document上的隐藏事件
}
}
//键盘按下事件
document.addEventListener("keyup",function(e){
var e=e||window.e;
reset()
//向上键
if(e.keyCode=="38"){
index--;
if(index<0){
index=list.length-1
}
}
//向下键
if(e.keyCode=="40"){
index++;
if(index>list.length-1){
index=0
}
}
//enter确认键
if(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="none";
return ;
}
list[index].className="bg";
})
//未选择时点击document隐藏
document.addEventListener("click",function(){
ul.style.display="none";
})
//样式重置
function reset(){
for(var i=0;i<list.length;i++){
list[i].className="";
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery及原生js获取select下拉框选中的值示例
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas
-
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别. select单选实例: <select v-model="fruit"> <option selected valu
-
javascript下拉框选项单击事件的例子分享
我本人是从事前端开发的技术人员,下拉框是我们应用的比较多的页面元素,今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子,希望对大家有所帮助. 复制代码 代码如下: <select name="" id="sel"> <option value="111">1</option> <option value="222">2</option> <opti
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
Select2.js下拉框使用小结
用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本. 官网:http://select2.github.io/ 演示: 由于博客系统的原因,所以只能演示简单的功能. 一.文件需要引入select2.full.js.select2.min.css(4.0.1版本)和jquery.1.8.3及以上 最新版本
-
Extjs中ComboBoxTree实现的下拉框树效果(自写)
最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧-- 在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下: 复制代码 代码如下: Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.
-
js实现带搜索功能的下拉框实时搜索实时匹配
1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT
-
JS实现下拉框的动态添加(附效果)
效果展示: 页面初加载时: 选择车类型后: 选择车颜色后: JS实现下拉框的动态添加,网页代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www
-
js实现Select下拉框具有输入功能的方法
本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <div style="
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat