<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="bar" list="country" type="text" />
<script language="javascript">
~(function(){
var window=this||(0,eval)('this');
var VM=function(){
//组件创建策略对象
var Method={
/***
* 下拉框
* dom 下拉框容器
* data下拉框信息
* */
select:function(dom,data){
var progress=document.createElement('datalist');
/**
var attr=document.createAttribute('id');
attr.value="country";
progress.setAttributeNode(attr);
**/
progress.setAttribute('id','country');
var option=[];
if(data.length){
for(var i=0,len=data.length;i<len;i++){
option.push(document.createElement('option'));
option[i].value=data[i];
option[i].style.width="80px";
progress.appendChild(option[i]);
}
}
dom.appendChild(progress);
},
//下拉信息
textdoc:function(){}
};
return {
init:function(dom,data){
Method.select(dom,data);
}
}
}();
window.VM=VM;
})();
window.onload=function(){
var data=['阿富汗','土耳其','巴布新几内亚'];
var div=document.getElementById('bar');
VM.init(div,data);
};
</script>
</body>
</html>
最后效果如图: