Ini adalah pilihan drop-down data khusus yang meniru CTRIP, yang menjelaskan beberapa parameter yang lebih penting, yang nyaman bagi pemula
/* *id: id The parent element of the current plug-in *data: json Selected data (json format) *bool: true/false Data If you want to separate the data into two values true *config: Configure the internal object of data (type takes effect when bool is true) { id: data field, name: data name, alias: data name first letter, type: data type} *fn: function fn(){} Callback function, click the function executed when menghasilkan tag*/ function yselect (id, ydata, bool, config, fn) {var data = []; Yselect_close = {}; var name_list = {ABCD EFGH IJKL M N:[] , O: [], p: [], q: [], r: [], s: [], t: [], u: [], v: [], w: [], x: [], y: [], z: [], lainnya: []} // Buat array baru untuk mencegah var ydropdowns = document.geteLementById yang tidak ditentukan; fungsi pretreatment () {// Proses data var catalogData = []; var branddata = []; var cina = []; var asing = []; untuk (var i di ydata) {if (ydata [i] [config.type] == null) catalogData.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.Alias]) lainnya Branddata.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.type])}; if (brandData! = "") {for (var i = 0; i <brandData.length; i ++) {var str = brandData [i] .split (';') if (str [3] == 0) cina.push (str [0] + ';' + str [1] + ';' + str [2]); lain asing.push (str [0] + ';' + str [1] + ';' + str [2]); } if (bool) {data = cina; pengembalian data; } else {data = asing; pengembalian data; }} else {data = CatalogData; pengembalian data; // mengembalikan data}}; fungsi jsondata (data_name, IDA) {// Proses data yang dikembalikan oleh pretreatment var title = []; // Tentukan huruf awal var ahtml = {ABCD EFGH IJKL M N:[] , O: [], p: [], q: [], r: [], s: [], t: [], u: [], v: [], w: [], x: [], y: [], z: [], lainnya: []}; // Buat array baru untuk mencegah var yselect_box = document.createElement ("div"); // Buat kotak pilihan baru elemen induk yselect_box.id = eda+"_ yselect_box"; var yselect_div = document.createelement ("div"); // container dengan nilai pengembalian huruf var yselect_letter = document.createElement ("p"); // 26 Surat wadah yselect_letter.id = Ida+'_ yselect_letter' var stylelink = document.createElement ("style") // buat kulit, dengan dua set kulit untuk dipilih dari //stylelink.innerhtml = '#'+id+'_ yselect_box {width: width: 100%;position:absolute;top:30px;left:0;z-index:9999;background:#ffff}#'+id+'_Yselect_box p{background: #469bde;padding:0 10px;}#'+id+'_Yselect_box p span.close{font: 16px/20px Microsoft Yahei; kursor: pointer; posisi: absolute; atas: 0; kanan: 0; warna:#f00}#'+id+' _ yselect_box .hide_tag {border: 1px solid#469bde; padding: 5px; tampilan: tidak ada; min-height: 100px; max-height: 300px; min-width: 300px; max-width: 800px; overflow: auto}#'+id+' _ ySelect_box pa {padding: 5px; line-height: 28px; color: #FFFF}#'+id+' 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; spasi putih: nowrap;}#'+id+' _ yselect_box .hide_tag A: hover {latar belakang:#469bde; warna: #fff;}#'+id+' _ yselect_box .cur {bord-bottom: 2px solid#fac51 fac51; styleLink.innerHtml = '#'+IDA+'_ ySelect_box {Lebar: 100%; min-width: 500px; Max-Width: 800px; Posisi: Absolute; Top: 30px; Kiri: 0; Z-index: 9999; latar belakang: #FFF; BORDER: 1PX #DOBER #dd #DDEC: 9999; latar belakang: #FFFF; BORDER: 1PX# P {Padding: 0 10px;}#'+Ida+' _ yselect_box p span.close {font: 16px/20px microsoft Yahei; kursor: pointer; Posisi: absolute; atas: 0; kanan: 0; warna:#666}#'+ida+' _ yselect_box. none;min-height:50px;max-height:200px;overflow:auto}#'+ida+'_Yselect_box pa{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; spasi putih: nowrap;}#'+eda+' _ yselect_box .hide_tag A: hover {latar belakang:#469bde; color: #fff;}#'+Ida+' _ yselect_box a.cur {border-bottom: 2px solid#46 46 46 (46 Box: #cur {border-bottom: 2px SOLID#46 46 46 46 (46 Box: #Cur {bord-Bottom: 2px SOLID#46 46 46 BOORD: #CUR {bord-BOTTOM: 2PX SOLID#46 46 untuk (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split (';') title.push (str [2] .charat (0) .tolocaleuppercase ()) // menilai surat awal dan menetapkannya ke judul}; untuk (var j dalam judul) {if (name_list [tit [j]]) name_list [tit [j]]. push (data_name [j]); else name_list.other.push (data_name [j])} // Masukkan data ke name_list untuk (var k di name_list) {// Data proses, dipisahkan dengan huruf, sembunyikan if (name_list [k] .length! = 0) {for (var i = 0; i <name_list [k] .length; i+++ = var i = 0; i <name_list [k]. OnClick = "' + fn +' (this)" 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>'+ahtml [k]+'</div>'; }; } var bool = true yselect_box.innerHtml = '<p id = "'+eda+'_ yselect_letter'+'">'+yselect_letter.innerHtml+'<span> x </span> </p>'+yselect_div.innerhtml; Ydropdowns.AppendChild (yselect_box); Ydropdowns.AppendChild (StyLelink); // masukkan Pilih ke dalam halaman yselect_box.getElementsbyTagname ('p') [0] .getElementsByTagname ('span') [0] .onClick = function yselect_close () {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); bool = false} // klik untuk menghancurkan pilih 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); }} // Hancurkan fungsi pilih kembali yselect_close} jsondata (pretreatment (), id) navlist (id) function navlist (id) {// tab pemrosesan tab var a = document.geteLementById (ids+'_ ySelect_letter'). GetElementsByByTagname ('A); var div = document.geteLementById (ids+'_ ySelect_box'). GetElementsByTagname ('Div'); Div [0] .style.display = "block"; A [0] .className = "cur"; untuk (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"}; }; }; }; };