自定义下拉列表

原创 2018年04月16日 19:17:32

自定义下拉列表,也就是点击一个选择框的时候,下面会弹出相对应的推荐的选项,再选择一个之后,选项的内容会填充到选择框里面。选项框随之消失。

首先我们先定义两个框,一个选择框,一个选项框,代码结构如下:

<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元素。然后将其内容赋予选择框就可以了。

最后选择结束之后,再将下面的提示框隐藏掉就可以了。



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zmylll/article/details/79964814

Android自定义组合控件

【课程介绍】 开发工具:Android Studo ;如何自定义组合控件
  • 2016年11月13日 21:15

浅谈CSS自定义下拉列表的样式

HTML代码: 请选择 北京 上海 广州 CSS代码: #container{ background:grey; width:300px; height:200px; pad...
  • zhouziyu2011
  • zhouziyu2011
  • 2016-12-18 21:00:50
  • 6897

自定义View,实现PopupWindow下拉列表

实现思路: 1.添加Butterknife的依赖,取消掉ActionBar,使用ToolBar代替 2.完成整体的布局,初始化控件,设置点击事件 3.初始化Popuwindow所要显示的数据 4...
  • lisiruxiaoniu
  • lisiruxiaoniu
  • 2017-09-06 08:59:53
  • 269

c# winform自定义下拉列表(源码)

  • 2015年01月10日 11:27
  • 39KB
  • 下载

MlSkin.Demo.自定义下拉列表.2.x

  • 2016年05月14日 13:35
  • 833KB
  • 下载

自定义Spinner

  • 2016年07月28日 22:53
  • 13.24MB
  • 下载

Android开发自定义下拉框下拉列表

自定义下拉满足需求,下拉选择框
  • qq_36726461
  • qq_36726461
  • 2017-05-08 11:06:47
  • 3738

Android自定义下拉列表PopupWindow

自定义PopupWindow定义一个主类:package com.example.administrator.testpopuwindow;import android.os.Bundle; impo...
  • as_jon
  • as_jon
  • 2016-05-12 10:13:17
  • 977

html 中可以自定义输入的 select 下拉列表

在项目开发中,往往有这种需求:那就是需要下拉选择已有的数据列表,当没有自己需要的数据时,往往需要去管理这些列表数据的画面去添加,或者在下拉列表后面放一个快捷按钮,先添加,然后再选。那么问题就来了,如果...
  • tzhuwb
  • tzhuwb
  • 2017-09-02 08:43:32
  • 1196

Android Android自定义的下拉列表框控件

一、概述 Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类...
  • u013068887
  • u013068887
  • 2017-10-20 13:49:40
  • 2253
收藏助手
不良信息举报
您举报文章:自定义下拉列表
举报原因:
原因补充:

(最多只允许输入30个字)