这是一个仿携程自定义的数据下拉选择select，对一些比较重要的参数进行的描述，方便初学者
/* *id ： id 当前插件的父元素 *data ： json 选择的数据（json格式） *bool ： true/false data数据如果要分离成两个 值为true *config ： 配置data的内部对象(type在bool为true的时候生效) { id : 数据字段, name : 数据名称, alias : 数据名称首字母, type : 数据类型 } *fn ： function fn(){} 回调函数，点击生成标签的时执行的函 */ function yselect(id,ydata,bool,config,fn){ var data = []; yselect_close = {}; var name_list = {a:[],b:[],c:[],d:[],e:[],f:[],g:[],h:[],i:[],j:[],k:[],l:[],m:[],n:[],o:[],p:[],q:[],r:[],s:[],t:[],u:[],v:[],w:[],x:[],y:[],z:[],其他:[]} //新建数组，防止出现undefind var ydropdowns = document.getelementbyid(id); function pretreatment(){ //处理数据 var catalogdata = []; var branddata = []; var china = []; var foreign = []; for (var i in ydata) { if (ydata[i][config.type] == null) catalogdata.push(ydata[i][config.id]+';'+ydata[i][config.name]+';'+ydata[i][config.alias]) else branddata.push(ydata[i][config.id]+';'+ydata[i][config.name]+';'+ydata[i][config.alias]+';'+ydata[i][config.type]) }; if (branddata != ) { for (var i = 0 ; i < branddata.length ; i++) { var str = branddata[i].split(';') if (str[3] == 0) china.push(str[0] + ';' + str[1] + ';' + str[2]); else foreign.push(str[0] + ';' + str[1] + ';' + str[2]); } if (bool) { data = china; return data; }else { data = foreign; return data; } }else{ data = catalogdata; return data; //返回出数据 } }; function jsondata(data_name,ida){ //处理pretreatment返回出的数据 var tit = []; //定义首字母 var ahtml = {a:[],b:[],c:[],d:[],e:[],f:[],g:[],h:[],i:[],j:[],k:[],l:[],m:[],n:[],o:[],p:[],q:[],r:[],s:[],t:[],u:[],v:[],w:[],x:[],y:[],z:[],其他:[]}; //新建数组，防止出现undefind var yselect_box = document.createelement(div); //新建选择框父元素 yselect_box.id = ida+_yselect_box; var yselect_div = document.createelement(div); //字母返回值的容器 var yselect_letter = document.createelement(p); //26字母容器 yselect_letter.id = ida+'_yselect_letter' var stylelink = document.createelement(style) //创建皮肤，有两套皮肤可供选择 //stylelink.innerhtml = '#'+id+'_yselect_box{width: 100%;position:absolute;top:30px;left:0;z-index:9999;background:#fff}#'+id+'_yselect_box p{background: #469bde;padding:0 10px;}#'+id+'_yselect_box p span.close{font: 16px/20px 微软雅黑;cursor:pointer;position:absolute;top:0;right:0;color:#f00}#'+id+'_yselect_box .hide_tag{border: 1px solid #469bde;padding:5px;display: none;min-height:100px;max-height:300px;min-width:300px;max-width:800px;overflow:auto}#'+id+'_yselect_box p a{padding:5px;line-height: 28px;color:#fff}#'+id+'_yselect_box .hide_tag a{width:80px;display:block;text-decoration:none;padding:5px;line-height: 12px;font-size:12px;float:left;color:#444;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;}#'+id+'_yselect_box .hide_tag a:hover{background:#469bde;color:#fff;}#'+id+'_yselect_box .cur{border-bottom: 2px solid #fac51f}'; stylelink.innerhtml = '#'+ida+'_yselect_box{width: 100%;min-width:500px;max-width:800px;position:absolute;top:30px;left:0;z-index:9999;background:#fff;border:1px solid #ddd;}#'+ida+'_yselect_box p{padding:0 10px;}#'+ida+'_yselect_box p span.close{font: 16px/20px 微软雅黑;cursor:pointer;position:absolute;top:0;right:0;color:#666}#'+ida+'_yselect_box .hide_tag{padding:5px 10px;display: none;min-height:50px;max-height:200px;overflow:auto}#'+ida+'_yselect_box p a{padding:5px;line-height: 28px;color:#333;border-bottom:2px solid #bbb;font-weight:bold}#'+ida+'_yselect_box .hide_tag a{width:80px;display:block;text-decoration:none;padding:5px;line-height: 12px;font-size:12px;float:left;color:#444;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;}#'+ida+'_yselect_box .hide_tag a:hover{background:#469bde;color:#fff;}#'+ida+'_yselect_box a.cur{border-bottom: 2px solid #469bde;color:#469bde}'; for (var i = 0 ; i < data_name.length ; i++) { var str = data_name[i].split(';') tit.push(str[2].charat(0).tolocaleuppercase()) //判断首字母，赋值给tit }; for(var j in tit){ if(name_list[tit[j]]) name_list[tit[j]].push(data_name[j]); else name_list.其他.push(data_name[j]) } //将数据插入name_list里 for (var k in name_list){ //处理数据，以字母分离，为空就隐藏 if (name_list[k].length != 0) { for (var i = 0 ; i < name_list[k].length ; i++) { var allhtml = '' + name_list[k][i].split(';')[1] + ''; ahtml[k] += allhtml ; }; yselect_letter.innerhtml += ''+k+''; yselect_div.innerhtml += ''+ahtml[k]+'
'; }; } var bool = true yselect_box.innerhtml = ''+yselect_letter.innerhtml+'x
'+ yselect_div.innerhtml; ydropdowns.appendchild(yselect_box); ydropdowns.appendchild(stylelink); //将select插入页面 yselect_box.getelementsbytagname('p')[0].getelementsbytagname('span')[0].onclick = function yselect_close(){ ydropdowns.removechild(yselect_box) ydropdowns.removechild(stylelink); bool = false } //点击销毁select yselect_close.close = function yselect_close(obool){ if(obool){ ydropdowns.removechild(yselect_box) ydropdowns.removechild(stylelink); bool = false return }; if (bool) { ydropdowns.removechild(yselect_box) ydropdowns.removechild(stylelink); } } //销毁select函数 return yselect_close } jsondata(pretreatment(),id) navlist(id) function navlist(ids){ //tab选项卡处理函数 var a = document.getelementbyid(ids+'_yselect_letter').getelementsbytagname('a'); var div = document.getelementbyid(ids+'_yselect_box').getelementsbytagname('div'); div[0].style.display = block ; a[0].classname = cur; for (var i = 0 ; i < a.length ; i++) { a[i].index = i; a[i].onclick = function(){ for (var j = 0 ; j < a.length ; j++){ div[j].style.display = none; a[j].classname = ; }; div[this.index].style.display = block; this.classname = cur }; }; }; };