这是一个仿携程自定义的数据下拉选择select,对一些比较重要的参数进行的描述,方便初学者
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/* *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)" id="codetool">
延伸 · 阅读
精彩推荐
|