一个不错的仿携程自定义数据下拉选择select
这是一个仿携程自定义的数据下拉选择select，对一些比较重要的参数进行的描述，方便初学者
/*
*id：id当前插件的父元素
*data：json选择的数据（json格式）
*bool：true/falsedata数据如果要分离成两个值为true
*config：配置data的内部对象(type在bool为true的时候生效)
{
id:数据字段,
name:数据名称,
alias:数据名称首字母,
type:数据类型
}
*fn：functionfn(){}回调函数，点击生成标签的时执行的函
*/
functionYSelect(id,Ydata,bool,config,fn){
vardata=[];
Yselect_close={};
varname_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
varYDropdowns=document.getElementById(id);
functionPretreatment(){//处理数据
varCatalogData=[];
varBrandData=[];
varchina=[];
varforeign=[];
for(variinYdata){
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(vari=0;i<BrandData.length;i++){
varstr=BrandData[i].split(';')
if(str[3]==0)china.push(str[0]+';'+str[1]+';'+str[2]);
elseforeign.push(str[0]+';'+str[1]+';'+str[2]);
}
if(bool){
data=china;
returndata;
}else{
data=foreign;
returndata;
}
}else{
data=CatalogData;
returndata;//返回出数据
}
};
functionjsondata(data_name,ida){//处理Pretreatment返回出的数据
vartit=[];//定义首字母
varAhtml={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
varYselect_box=document.createElement("div");//新建选择框父元素
Yselect_box.id=ida+"_Yselect_box";
varYselect_div=document.createElement("div");//字母返回值的容器
varYselect_letter=document.createElement("p");//26字母容器
Yselect_letter.id=ida+'_Yselect_letter'
varstylelink=document.createElement("style")//创建皮肤，有两套皮肤可供选择
//stylelink.innerHTML='#'+id+'_Yselect_box{width:100%;position:absolute;top:30px;left:0;z-index:9999;background:#fff}#'+id+'_Yselect_boxp{background:#469bde;padding:010px;}#'+id+'_Yselect_boxpspan.close{font:16px/20px微软雅黑;cursor:pointer;position:absolute;top:0;right:0;color:#f00}#'+id+'_Yselect_box.hide_tag{border:1pxsolid#469bde;padding:5px;display:none;min-height:100px;max-height:300px;min-width:300px;max-width:800px;overflow:auto}#'+id+'_Yselect_boxpa{padding:5px;line-height:28px;color:#fff}#'+id+'_Yselect_box.hide_taga{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_taga:hover{background:#469bde;color:#fff;}#'+id+'_Yselect_box.cur{border-bottom:2pxsolid#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:1pxsolid#ddd;}#'+ida+'_Yselect_boxp{padding:010px;}#'+ida+'_Yselect_boxpspan.close{font:16px/20px微软雅黑;cursor:pointer;position:absolute;top:0;right:0;color:#666}#'+ida+'_Yselect_box.hide_tag{padding:5px10px;display:none;min-height:50px;max-height:200px;overflow:auto}#'+ida+'_Yselect_boxpa{padding:5px;line-height:28px;color:#333;border-bottom:2pxsolid#bbb;font-weight:bold}#'+ida+'_Yselect_box.hide_taga{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_taga:hover{background:#469bde;color:#fff;}#'+ida+'_Yselect_boxa.cur{border-bottom:2pxsolid#469bde;color:#469bde}';
for(vari=0;i<data_name.length;i++){
varstr=data_name[i].split(';')
tit.push(str[2].charAt(0).toLocaleUpperCase())//判断首字母，赋值给tit
};
for(varjintit){
if(name_list[tit[j]])
name_list[tit[j]].push(data_name[j]);
elsename_list.其他.push(data_name[j])
}//将数据插入name_list里
for(varkinname_list){//处理数据，以字母分离，为空就隐藏
if(name_list[k].length!=0){
for(vari=0;i<name_list[k].length;i++){
varallhtml='<ahref="javascript:"onclick="'+fn+'(this)"title="'+name_list[k][i].split(';')[1]+'"name="'+name_list[k][i].split(';')[0]+'">'+name_list[k][i].split(';')[1]+'</a>';
Ahtml[k]+=allhtml;
};
Yselect_letter.innerHTML+='<ahref="javascript:">'+k+'</a>';
Yselect_div.innerHTML+='<divclass="hide_tag">'+Ahtml[k]+'</div>';
};
}
varbool=true
Yselect_box.innerHTML='<pid="'+ida+'_Yselect_letter'+'">'+Yselect_letter.innerHTML+'<spanclass="close">x</span></p>'+Yselect_div.innerHTML;
YDropdowns.appendChild(Yselect_box);
YDropdowns.appendChild(stylelink);//将select插入页面
Yselect_box.getElementsByTagName('p')[0].getElementsByTagName('span')[0].onclick=functionYselect_close(){
YDropdowns.removeChild(Yselect_box)
YDropdowns.removeChild(stylelink);
bool=false
}//点击销毁select
Yselect_close.close=functionYselect_close(obool){
if(obool){
YDropdowns.removeChild(Yselect_box)
YDropdowns.removeChild(stylelink);
bool=false
return
};
if(bool){
YDropdowns.removeChild(Yselect_box)
YDropdowns.removeChild(stylelink);
}
}//销毁select函数
returnYselect_close
}
jsondata(Pretreatment(),id)
navlist(id)
functionnavlist(ids){//tab选项卡处理函数
vara=document.getElementById(ids+'_Yselect_letter').getElementsByTagName('a');
vardiv=document.getElementById(ids+'_Yselect_box').getElementsByTagName('div');
div[0].style.display="block";a[0].className="cur";
for(vari=0;i<a.length;i++){
a[i].index=i;
a[i].onclick=function(){
for(varj=0;j<a.length;j++){
div[j].style.display="none";
a[j].className="";
};
div[this.index].style.display="block";
this.className="cur"
};
};
};
};