自定义下拉列表,也就是点击一个选择框的时候,下面会弹出相对应的推荐的选项,再选择一个之后,选项的内容会填充到选择框里面。选项框随之消失。
首先我们先定义两个框,一个选择框,一个选项框,代码结构如下:
<div id="info"> 选择一个你最喜欢的游戏 </div> <ul id="chose"> <li>王者荣耀</li> <li>LOL</li> <li>吃鸡</li> <li>连连看</li> <li>冒险岛</li> <li>穿越火线</li> <li>地下城与勇士</li> <li>梦幻西游</li> </ul>
css样式这里就不说了,大家可以自己设计。
HTML结构写好之后,接下来就是通过JS代码来实现我们所需要的功能了。首先,选项框我们需要将其隐藏,也就是设置其display属性为none。
$("#info").addEventListener("click",function(e){ e = e || event; e.stopPropagation(); $("#chose").style.display = "block"; }); $("#chose").addEventListener("click",function(e){ e = e || event; var src = e.target || e.srcElement; $("#info").innerHTML = src.innerHTML; $("#info").style.color = "black"; $("#chose").style.display = "none"; }); document.onclick = function(){ $("#chose").style.display = "none"; };
注:通过element.addEventListener(type, callback[, useCapture])给特定的dom元素添加一个事件监听。
其中type是事件的类型,如click,dblclick,mouseover等,也就是事件句柄去掉前面的on。
e = e || event; e.stopPropagation();
上面的两句代码是用来阻止事件冒泡的。
然后再通过事件委托(以事件冒泡的特性设计的一种方法)将选项的值赋予选择框。
注:element.target是获取最初触发事件的事件源元素,这里点击选择的时候,最初触发的事件源,很明显就是一个一个的li元素。然后将其内容赋予选择框就可以了。
扫描二维码关注公众号,回复:
450945 查看本文章
最后选择结束之后,再将下面的提示框隐藏掉就可以了。