阿里巴巴17实习生招聘编程题目（JavaScript解法）
题目：完成一个类似于自己编写的选择框。30分钟瞎写了一通，后来整理代码如下。
原型题目
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>body</title>
<style>
/* your code here */
</style>
</head>
<body>
<div id="select"></div>
<script>
function select(options){
// your code here
}
// eg
select({
srcNode: '#select',
data: ['北京','上海','杭州'],
onChange: (ev)=>{
console.log(ev.value);
}
})
</script>
</body>
</html>
其中 youcodehere则为自己编写代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>阿里巴巴17校招测试题目</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{border: 1px solid #ccc;display: none;}
ul li{list-style: none;cursor: pointer;}
body{font-family: "微软雅黑";font-size: 14px; padding: 100px;}
.select{width: 100px;height: 14px; }
.select input{width: 98%;height:100%;text-indent: 0.5em;margin-left: -1px;margin-top: -1px;}
</style>
</head>
<body>
<div class="select" id="select"></div>
</body>
<script type="text/javascript">
function select(options){
//获取DIV对象
var seleDom = document.getElementById(options.srcNode.replace("#",""));
//构造DIV内部元素
var html = "<input/><ul>"
var datas = options.data;
for (i=0;i<datas.length;i++) {
html+="<li>"+datas[i]+"</li>";
}
html+= "</ul>";
//DIV添加
seleDom.innerHTML = html;
//单击INPUT框时，修改DISPALAY
//获取INPUT对象
var inputobj = document.getElementsByTagName('input');
var input = inputobj[0];
//获取UL对象
var ulDom = document.getElementsByTagName('ul');
input.onfocus = function(e){
//显示
ulDom[0].style.display ="block";
//为每一个LI绑定点击事件
var liDoms = document.getElementsByTagName('li');
for (i=0;i<liDoms.length;i++) {
liDoms[i].onclick = function(e){
e.value = this.innerHTML;
options.onChange(e,input);
//点击后取消DISPLAY
ulDom[0].style.display ="none";
}
}
}
};
// eg
select({
srcNode: '#select',
data: ['北京','上海','杭州'],
onChange:function(ev,input){
input.value = ev.value;
}
});
</script>
</html>
此版本为JS版本，明天上传JQ版本的解法
浙公网安备 33010602011771号