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

字数 151阅读 1189

这是某公司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);
}

在线演示

个人技术博客 biebu.xin,原文链接——编程题之原生JS实现下拉菜单

推荐阅读更多精彩内容