欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

一个不错的仿携程自定义数据下拉选择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
相关标签: 下拉选择 select