一个不错的仿携程自定义数据下拉选择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 相关文章推荐
javascript模拟订火车票和退票示例
Apr 24 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 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
php批量删除cookie的简单实现方法
2015/01/26 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python中return不返回值的问题解析
2020/07/22 Python
python3判断IP地址的方法
2021/03/04 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
护理自我鉴定范文
2013/10/06 职场文书
工作会议主持词
2014/03/17 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
现实表现材料范文
2014/12/23 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js