一个不错的仿携程自定义数据下拉选择select_javascript技巧
程序员文章站
2022-05-20 20:05:16
...
这是一个仿携程自定义的数据下拉选择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 ' + 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