这是某公司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实现下拉菜单
网友评论