原生js手写下拉选择框

最新推荐文章于 2024-07-22 14:22:40 发布

调调啊

最新推荐文章于 2024-07-22 14:22:40 发布

阅读量977

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_49577940/article/details/119597023

版权

JavaScript DOM操作事件监听下拉选择 HTML列表

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

46 篇文章 9 订阅

订阅专栏

效果如下

贴代码 (死数据)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉选择</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 300px;
            height: 40px;
            border: 1px solid #000;
            margin-left: 100px;
            margin-top: 100px;

        }

        ul {
            display: none;
            width: 300px;
            margin-left: 100px;
            border: 1px solid gray;

        }

        li {
            list-style: none;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="content">


    </div>

    <ul class="select-box">
        <li>上海</li>
        <li>北京</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
</body>
<script>
    var content = document.querySelector('.content')
    var ul = document.querySelector('ul')
    var lis = document.querySelectorAll('li')

    content.addEventListener('click', function () {
        ul.style.display = 'block'
    })


    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            content.innerHTML = this.innerHTML
            ul.style.display = 'none'

        }
    }
</script>

</html>

贴代码(活数据)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉选择</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 300px;
            height: 40px;
            border: 1px solid #000;
            margin-left: 100px;
            margin-top: 100px;

        }

        ul {
            display: none;
            width: 300px;
            margin-left: 100px;
            border: 1px solid gray;

        }

        li {
            list-style: none;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="content">


    </div>

    <ul class="select-box">

    </ul>
</body>
<script>
    var data = [{
            name: "上海"
        },
        {
            name: "北京"
        }, {
            name: "广州"
        }, {
            name: "深圳"
        },

    ]
    var content = document.querySelector('.content')
    var div = document.querySelector('.select-box')
    var ul = document.querySelector('ul')

    for (var i = 0; i < data.length; i++) {

        var li = document.createElement('li');

        li.innerText = data[i].name;

        ul.appendChild(li)
    }


    content.addEventListener('click', function () {
        ul.style.display = 'block'
    })

    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            content.innerText = this.innerHTML
            ul.style.display = ''

        }
    }
</script>

</html>