编程题之原生JS实现下拉菜单

作者: 剪影Boy | 来源:发表于2017-03-16 16:33 被阅读907次

编程题之原生JS实现下拉菜单
编程题之原生JS实现对话框
原生JS实现Tab切换效果和模态框效果
JavaScript入门（上）基础语法、数组、流程控制语句、函数
原生js实现下拉菜单效果
初始React
八（1）、Promise（周） ------ 2020-02-2
实现拖拽
原生js实现addClass,removeClass,hasCl
js拖拽

这是某公司2017前端实习招聘的一道编程测试题——用JS实现一个下拉菜单。自己研究了一番，实现了题目要求的效果。

题目给出了大体的框架：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Select Demo</title>
</head>
<body>
    <h1>Select Demo</h1>
    <div id="select"></div>
    <script>
        "use strict";
        function Select(options) {
            // Your code here
        }
        Select({
            target: '#select',
            data: ['北京', '上海', '杭州', '深圳'],
            onChange: (ev) => {
                console.log(ev.value);
            }
        });
    </script>
</body>
</html>

只需要补全函数Select的声明即可。

题目本身并不难，考察的对原生JS的熟练程度。

最后，我的实现如下：

function Select(options) {
    var layout;
    for (var i = 0; i< options.data.length; i++) {
        layout += "<option value='" + options.data[i] + "'>" + options.data[i] + "</option>";
    }
    var _Select = document.createElement("select");
    _Select.innerHTML = layout;
    _Select.addEventListener("change", function(e) {
        options.onChange(e.target);
    });
    document.querySelector(options.target).appendChild(_Select);
}

可以稍微设置一下样式：

function Select(options) {
    var layout;
    for (var i = 0; i< options.data.length; i++) {
        layout += "<option value='" + options.data[i] + "'>" + options.data[i] + "</option>";
    }
    var _Select = document.createElement("select");
    _Select.innerHTML = layout;

    _Select.style.WebkitAppearance = "none"; // 去掉右边下拉三角
    _Select.style.padding = "0 10px"; // 适当有一些内边距
    _Select.style.backgroundColor = "#fff"; // 背景设为白色

    _Select.addEventListener("change", function(e) {
        options.onChange(e.target);
    });
    document.querySelector(options.target).appendChild(_Select);
}

在线演示