JavaScript实现下拉列表select控件

最新推荐文章于 2023-04-12 11:11:45 发布
最新推荐文章于 2023-04-12 11:11:45 发布
阅读量643 收藏 5
点赞数 4
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22154647/article/details/104552343
版权

一.html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="menu">
        <p>下拉菜单</p>
        <span>html</span>
        <ul>
            <li class="active">html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </div>
</body>

</html>

二.css部分

#menu {
            width: 200px;
            height: 60px;
            line-height: 30px;
            margin: 20px auto;
            text-align: center;
        }

        #menu p {
            height: 30px;
            line-height: 30px;
        }

        #menu span {
            display: block;
            width: 200px;
            line-height: 30px;
            border: solid 1px black;
        }

        #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: auto;
            border: solid 1px black;
            border-top: none;
            display: none;
            width: 100%;
            height: 90px;
        }

        #menu ul li {
            width: 100%;
            height: 30px;
        }

        #menu ul li.active {
            background: #35f;
            color: #fff;
        }

三.JavaScript部分

1.初始化

var ospan = document.querySelector("#menu span");
        var oul = document.querySelector('#menu ul');
        var ali = document.querySelectorAll("#menu ul li");
        var index = 0;                              //索引
        var temporary = index;                      //临时存放索引
        var state = 0;                              //ul转态 0为隐藏，1为显示
        for (var i = 0; i < ali.length; i++) {      //初始化li
            ali[i].className = "";
        }
        
        ospan.innerHTML = ali[index].innerHTML;     //显示默认选中的li内容

2.点击下拉列表主框

ospan.onclick = function (eve) {            //点击显示ul
            var e = eve || window.event;
            stopBubble(e);
            if (state == 0) {
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[index].className = "active";
                oul.style.display = "block";        //设置为显示
                state = 1;
            } else {
                oul.style.display = "none";
                state = 0;
            }
        }

3.点击ul内区域

for (let i = 0; i < ali.length; i++) {      //点击下拉框内事件
            ali[i].onmouseover = function () {
                index = i;
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[i].className = "active";
                ospan.innerHTML = ali[i].innerHTML;
            }
            ali[i].onclick = function () {
                ospan.innerHTML = ali[i].innerHTML;
                index = i;
                temporary = index;                  //选中li的索引赋值给临时索引
            }
        }

4.键盘事件

document.onkeydown = function (eve) {       //键盘事件
            if (state == 1) {
                var e = eve || window.event;
                var code = e.which || e.keyCode;
                if (code == 38) {                   //方向键：上
                    if (index == 0) {
                        index = 0;
                    }
                    else {
                        index--;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 40) {               //方向键：下
                    if (index == 0) {
                        index = 0;
                    }
                    if (index < ali.length - 1) {
                        index++;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 13) {               //enter回车键
                    oul.style.display = "none";
                    state = 0;
                    ospan.innerHTML = ali[index].innerHTML;
                    temporary = index;
                }
            }

        }

5.点击下拉框外区域

document.onclick = function () {            //鼠标点击下拉框外事件
            oul.style.display = "none";             //ul隐藏
            state = 0;                              //状态码改为0
            index = temporary;                      //临时存放索引
            ospan.innerHTML = ali[index].innerHTML;
        }

6.阻止冒泡

//阻止冒泡
        function stopBubble(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu {
            width: 200px;
            height: 60px;
            line-height: 30px;
            margin: 20px auto;
            text-align: center;
        }

        #menu p {
            height: 30px;
            line-height: 30px;
        }

        #menu span {
            display: block;
            width: 200px;
            line-height: 30px;
            border: solid 1px black;
        }

        #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: auto;
            border: solid 1px black;
            border-top: none;
            display: none;
            width: 100%;
            height: 90px;
        }

        #menu ul li {
            width: 100%;
            height: 30px;
        }

        #menu ul li.active {
            background: #35f;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="menu">
        <p>下拉菜单</p>
        <span>html</span>
        <ul>
            <li class="active">html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </div>
    <script>
        //阻止冒泡
        function stopBubble(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }
        //下拉列表
        var ospan = document.querySelector("#menu span");
        var oul = document.querySelector('#menu ul');
        var ali = document.querySelectorAll("#menu ul li");
        var index = 0;                              //索引
        var temporary = index;                      //临时存放索引
        var state = 0;                              //ul转态 0为隐藏，1为显示
        for (var i = 0; i < ali.length; i++) {      //初始化li
            ali[i].className = "";
        }

        ospan.innerHTML = ali[index].innerHTML;     //显示默认选中的li内容
        ospan.onclick = function (eve) {            //点击显示ul
            var e = eve || window.event;
            stopBubble(e);
            if (state == 0) {
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[index].className = "active";
                oul.style.display = "block";        //设置为显示
                state = 1;
            } else {
                oul.style.display = "none";
                state = 0;
            }
        }
        document.onclick = function () {            //鼠标点击下拉框外事件
            oul.style.display = "none";             //ul隐藏
            state = 0;                              //状态码改为0
            index = temporary;                      //临时存放索引
            ospan.innerHTML = ali[index].innerHTML;
        }

        for (let i = 0; i < ali.length; i++) {      //点击下拉框内事件
            ali[i].onmouseover = function () {
                index = i;
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[i].className = "active";
                ospan.innerHTML = ali[i].innerHTML;
            }
            ali[i].onclick = function () {
                ospan.innerHTML = ali[i].innerHTML;
                index = i;
                temporary = index;                  //选中li的索引赋值给临时索引
            }
        }
        document.onkeydown = function (eve) {       //键盘事件
            if (state == 1) {
                var e = eve || window.event;
                var code = e.which || e.keyCode;
                if (code == 38) {                   //方向键：上
                    if (index == 0) {
                        index = 0;
                    }
                    else {
                        index--;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 40) {               //方向键：下
                    if (index == 0) {
                        index = 0;
                    }
                    if (index < ali.length - 1) {
                        index++;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 13) {               //enter回车键
                    oul.style.display = "none";
                    state = 0;
                    ospan.innerHTML = ali[index].innerHTML;
                    temporary = index;
                }
            }

        }
    </script>
</body>

</html>

 

fjxylin
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript用select实现日期控件
12-08
标题中的“JavaScript用select实现日期控件”是指利用HTML的`<select>`元素结合JavaScript来创建一个用户界面，让用户能够选择日期。这个控件通常由三个下拉列表组成：一个用于选择年份，一个用于选择月份，另一个...
javascript实现通过拼音首字母快速选择下拉列表
08-04
本篇文章将深入探讨如何使用JavaScript实现一个通过拼音首字母快速选择下拉列表的功能，这一功能通常用于提高用户在网页上的数据输入效率，特别是处理大量中文姓名或词汇时。 首先，我们需要理解HTML的基本结构，它...
element select 自动展开_原生js 让<select>下拉框自动展开 可用size 属性来代替展开动作...
weixin_39794340的博客
12-20 2238
找遍全网都没一个比较好的例子！！！什么获得焦点事件，或者添加一个点击事件都不能使下拉框自动展开最后用标签的siz属性定义和用法size 属性规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，浏览器会显示出滚动条，表示可以查看更多选项。实践效果：1.点击提交按钮，下拉框未选，但是要给下拉框一个聚焦事件let select = document.getElem...
js触发select的change事件
by breeze
03-15 1万+
写一个Chrome插件是碰到的问题，因为好像没法直接在注入的代码里面调用页面本身的方法，所以只能通过发送change事件让页面本身去执行了。 先是看来click事件的触发，下面给出的是change的事件触发： st = document.getElementById("order_billing_state"); ev = document.createEvent("HTMLEvents");
js如何控制select展开
weixin_30458043的博客
08-22 2495
找了一圈也没找到靠谱的方案，后来通过动态的控制select的size属性实现了。 这也算是一种方法吧。 先判断option的数量n，然后把select的size调整到n，当用户选择后，再把size设置为1 转载于:https://www.cnblogs.com/dongruiha/p/7410935.html...
js操作select下拉列表
热门推荐
qq_40910788的博客
11-27 1万+
js操作select下拉列表 一，通过已有的值，与select的值比较，并将其设置为默认 select代码： &lt;select name="tigong" id="tigong"&gt; &lt;option value="null"&gt;--全部--&lt;/option&gt; &lt;option value="喜剧"&gt;喜剧&a
Javascript操作select控件代码实例
10-15
【JavaScript操作select控件】在Web开发中，`select`元素是HTML中用于创建下拉列表的常见控件。本文将详细介绍如何使用JavaScript来操作这个控件，包括新增、删除、修改、选中和清空选项，以及判断特定选项是否存在...
jq重置select下拉列表.docx
04-29
在网页开发中，select下拉列表是一种常用的表单控件，用于让用户从多个选项中选择一个或多个选项。然而，在某些情况下，我们需要重置select下拉列表，以便在不同的场景下显示不同的选项或清空选项。今天，我们将讨论...
这是一款用于美化下拉列表菜单控件的jquery插件ddlist
08-09
在Web开发中，下拉列表（Select）是一种常见的表单控件，用于用户在预设的选项中进行选择。然而，原生的下拉列表样式通常较为单一，不能满足现代网页设计对于用户体验和视觉效果的需求。此时，jQuery插件ddlist...
js模拟点击select下拉菜单列表代码
11-19
js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码
jQuery下拉查询筛选插件Combo Select
11-22
Combo Select Jquery插件，带模糊搜索查询筛选功能。
javascript实现下拉菜单
05-07
使用jquery实现的下拉菜单具有缓慢弹出等特效
JS实现下拉框
qq_59494319的博客
06-24 3346
JS实现下拉框
javascript操作select
iVan
06-11 1080
前端的朋友可能会经常碰到js操作表单的*,那么我们今天先来演示select的操作. 一、基础理解： var e = document.getElementByIdx_x("selectId"); e.options = new Option("文本", "值");    //创建一个option对象，即在标签中创建一个或多个文本。options是一个数组，里面可存放多个文本标
【JS】 select 下拉框 绑定onchange事件
weixin_43242020的博客
04-12 5038
原因：网上查询说 onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。解决： 将onchnage事件改为onclick点击事件；2、js原生change事件。
JS对select操作
weixin_34327761的博客
01-30 647
  1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option...
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
leijuly'blog
04-20 668
判断select选项中 是否存在Value="paraValue"的Item  2向select选项中 加入一个Item  3从select选项中 删除一个Item  4删除select中选中的项  5修改select选项中 value="paraValue"的text为"paraText"  6设置select中text="paraText"的第一个Item为选中  7设置select中valu
HTML隐藏式下拉列表
最新发布
06-19
在这个例子中，点击按钮`showDropdown()`的事件会被触发，可以通过JavaScript动态改变`display`属性来控制下拉列表的可见性： ```javascript function showDropdown() { var dropdown = document.getElementById('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值