一个不错的仿携程自定义数据下拉选择select


Posted in Javascript onSeptember 01, 2014

这是一个仿携程自定义的数据下拉选择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 = '<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); //将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" 
}; 
}; 
}; 
};
Javascript 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
原生javascript实现拖动元素示例代码
Sep 01 #Javascript
使用text方法获取Html元素文本信息示例
Sep 01 #Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 #Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 #Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
You might like
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python基于PycURL实现POST的方法
2015/07/25 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python实现日常记账本小程序
2018/03/10 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
大学生求职简历的自我评价
2013/10/21 职场文书
卫校毕业生自我鉴定
2013/10/31 职场文书
仓库组长岗位职责
2014/01/29 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
公司合作协议范文
2014/10/01 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
员工升职自荐信
2015/03/27 职场文书