A good copy of ctrip custom data dropdown select

This is a copy of ctrip custom data drop-down select, some more important parameters for the description, convenient for beginners

/* 
*id  :  id  The parent element of the current plug-in  
*data  :  json  Selected data ( json Format)  
*bool  :  true/false data If you want to separate the data into two   A value of true 
*config  :   configuration data Internal object (type in bool for true In effect on ) 
{ 
id :  The data fields , 
name :  The name of the data , 
alias :  The first letter of the data name , 
type :  The data type  
} 
*fn  :  function fn(){}  Callback function, which is executed when clicking on the function that generates the label  
*/ 
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:[], other :[]} //Create a new array to prevent undefind
var YDropdowns = document.getElementById(id); 
function Pretreatment(){ //Process the data
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; //Return data
} 
}; 
function jsondata(data_name,ida){ //Process the data that goes out
var tit = []; //Definition initial
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:[], other :[]}; //Create a new array to prevent undefind
var Yselect_box = document.createElement("div"); //Create a new select box parent element
Yselect_box.id = ida+"_Yselect_box"; 
var Yselect_div = document.createElement("div"); //A container in which letters return values
var Yselect_letter = document.createElement("p"); //26 letter container
Yselect_letter.id = ida+'_Yselect_letter' 
var stylelink = document.createElement("style") //Create skin, there are two sets of skin to choose from
//Stylelink. InnerHTML = '#' + id + '_Yselect_box {width: 100%; Position: absolute; Top: 30 px; Left: 0; Z - index: 9999; Background: # FFF} # '+ id + _Yselect_box p {background: # 469 bde; Padding: 0 px; } # '+ id +' _Yselect_box p span. Cursor: pointer; Position: absolute; Top: 0; Right: 0; Color :#f00}#'+id+' _yselect_box.hide_tag {border: 1px solid #469bde; Padding: 5 px; Display: none; Min - height: 100 px; Max - height: 300 px; Min - width: 300 px; Max - width: 800 px; Overflow: auto # '+ id +' _Yselect_box p} a {padding: 5 px; The line - height: 28 px; Color: # FFF} # '+ id + _Yselect_box. Hide_tag a {width: 80 px; Display: block; The text - decoration: none; Padding: 5 px; The line - height: 12 px; The font - size: 12 px; Float: left; Color: # 444; Overflow: hidden; The text - overflow: ellipsis; White - space: nowrap; } # '+ id + _Yselect_box. Hide_tag a: hover {background: # 469 bde; Color: # FFF. 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  Microsoft jas black ;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()) //Determine the initial and assign it to tit
}; 
for(var j in tit){ 
if(name_list[tit[j]]) 
name_list[tit[j]].push(data_name[j]); 
else name_list. other .push(data_name[j]) 
} //Insert the data into the name_list
for (var k in name_list){ //Process data to letters separated as empty on the hide
if (name_list[k].length != 0) { 
for (var i = 0 ; i < name_list[k].length ; i++) { 
var allhtml = '<a href="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 += '<a href="javascript:" >'+k+'</a>'; 
Yselect_div.innerHTML += '<div class="hide_tag">'+Ahtml[k]+'</div>'; 
}; 
} 
var bool = true 
Yselect_box.innerHTML = '<p id="'+ida+'_Yselect_letter'+'">'+Yselect_letter.innerHTML+'<span class="close">x</span></p>'+ Yselect_div.innerHTML; 
YDropdowns.appendChild(Yselect_box); 
YDropdowns.appendChild(stylelink); //Insert the select into the page
Yselect_box.getElementsByTagName('p')[0].getElementsByTagName('span')[0].onclick = function Yselect_close(){ 
YDropdowns.removeChild(Yselect_box) 
YDropdowns.removeChild(stylelink); 
bool = false 
} //Click destroy 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); 
} 
} //Destroy the select function
return Yselect_close 
} 
jsondata(Pretreatment(),id) 
navlist(id) 
function navlist(ids){ //TAB TAB handler
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" 
}; 
}; 
}; 
};