Il s'agit d'une sélection de données de données personnalisée imitant CTRIP, qui décrit certains paramètres plus importants, ce qui est pratique pour les débutants
/ * * ID: ID L'élément parent du plug-in actuel * Données: JSON Sélectionnées Données (Format JSON) * BOOL: Vrai / False Données Si vous souhaitez séparer les données en deux valeurs vrai La balise * / fonction 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: [], autre: []} // Créez un nouveau tableau pour empêcher un var ydropdowns non défini = document.getElementById (id); Fonction Preteatment () {// Process Data var CatalogData = []; var BrandData = []; Var China = []; var étranger = []; pour (var i dans ydata) {if (ydata [i] [config.type] == null) catalogdata.push (ydata [i] [config.id] + ';' + ydata [i] [config.name] + ';' + ydata [i] [config.alias]) 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) China.push (str [0] + ';' + str [1] + ';' + str [2]); else étranger.push (str [0] + ';' + str [1] + ';' + str [2]); } if (bool) {data = china; retourner les données; } else {data = étranger; retourner les données; }} else {data = catalogData; retourner les données; // return data}}; fonction jSondata (data_name, ida) {// traiter les données renvoyées par prétraitement var title = []; // définir la lettre initiale 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: [], autre: []}; // Créez un nouveau tableau pour empêcher un var yselect_box = document.CreateElement ("div"); // Créez une nouvelle boîte de sélection élément parent yselect_box.id = ida + "_ yselect_box"; var yselect_div = document.createElement ("div"); // conteneur avec lettre de retour de lettre var yselect_letter = document.createElement ("p"); // 26 lettres conteneur yselect_letter.id = ida + '_ yselect_letter' var styleLink = document.CreateElement ("style") // Créer une peau, avec deux ensembles de skins à choisir dans //stylelink.innerhtml = '#' + id + '_ yselect_box {largeur: 100%; Position: Absolut; top: 30px; gauche: 0; z-index: 9999; background: #ffff} # '+ id +' _ yselect_box p {background: # 469bde; padding: 0 10px;} # '+ id +' _ yselect_box p span.close {Font: 16px / 20px Micosoft Yahei; curseur: pointeur; position: absolu; en haut: 0; droit: 0; couleur: # f00} # '+ id +' _ yselect_box .hide_tag {border: 1px solide # 469bde; padding: 5px; affichage: Aucun; min-height: 100px; max-height: 300px; min-width: 300px; max-width: 800px; overflow: auto} # '+ id +' _ yselect_box pa {padding: 5px; line-height: 28px; colore: #fff} # '+ id +' _ yselect_box. a {largeur: 80px; affichage: bloc; text-décoration: aucun; padding: 5px; line-height: 12px; police-size: 12px; float: gauche; couleur: # 444; débordement: caché; Text-overflow: ellipsis; blanc-espace: nowrap;} # '+ id +' _ yselect_box .hide_tag a: hover {background: # 469bde; couleur: #fff;} # '+ id +' _ yselect_box .cur {border-bottom: 2px Solid # FAC51f} ';; StyleLink.InnerHtml = '#' + ida + '_ yselect_box {width: 100%; min-width: 500px; max-width: 800px; position: absolu; top: 30px; gauche: 0; z-index: 9999; arrière p {padding: 0 10px;} # '+ ida +' _ yselect_box p span.close {font: 16px / 20px Microsoft yahei; curseur: pointeur; position: absolu; top: 0; droit: 0; Color: # 666} # '+ ida +' _ yselect_box .hide_tag {padding: 5px 10px; Aucun; min-height: 50px; max-height: 200px; overflow: auto} # '+ ida +' _ yselect_box pa {padding: 5px; line-height: 28px; couleur: # 333; border-bottom: 2px solid #bbb; fontwoxy. a {largeur: 80px; affichage: bloc; text-décoration: aucun; padding: 5px; line-height: 12px; police-size: 12px; float: gauche; couleur: # 444; débordement: caché; Texte-Overflow: EllipSis; White-Space: Nowrap;} # '+ ida +' _ yselect_box .hide_tag a: hover {background: # 469bde; Color: #fff;} # '+ ida +' _ yselect_box a.cur {border-bottom: 2px solide # 469bde; couleur: # 469bde: 2px solide # 469bde; Color: # 469BDE:; pour (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split (';') title.push (str [2] .Charat (0) .tolocaleupperase ()) // juge la lettre initiale et les attribuer au titre}; pour (var j en title) {if (name_list [tit [j]]) name_list [tit [j]]. push (data_name [j]); else name_list.other.push (data_name [j])} // insérer des données dans name_list pour (var k in name_list) {// traiter les données, séparées par lettres, masquer if (name_list [k] .length! = 0) {pour (var i i = 0; i <name_list [k] .length; i ++) {var alhtml = '<a href = "javascript:" 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 = "' + ida + '_ yselect_letter' + '">' + yselect_letter.innerhtml + '<span> x </span> </p>' + yselect_div.innerhtml; YDropdown.APPEndChild (yselect_box); YDropdown.APPENDCHILD (StyleLink); // Insérez la sélection dans la page yselect_box.getElementsByTagName ('p') [0] .getElementsByTagName ('span') [0] .onclick = function yselect_close () {ydropdown.removechild (yselect_box) ydropdown.removechild (ylelink); bool = false} // cliquez pour détruire la sélection yselect_close.close = fonction yselect_close (obool) {if (obool) {ydropdowns.removechild (yselect_box) ydropdown.removechild (stylelink); bool = false return}; if (bool) {ydropdown.removechild (yselect_box) ydropdown.removechild (styleLink); }} // Détruisez la fonction de sélection return yselect_close} jSondata (prétraitement (), id) NavList (id) fonction navist (ids) {// onglet onglet fonction de traitement var a = document.getElementByid (ids + '_ yselect_letter'). GetElementsByTagName ('a'); var div = document.getElementById (ids + '_ yselect_box'). GetElementsByTagName ('div'); div [0] .style.display = "bloc"; 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 = "Aucun"; a [j] .classname = ""; }; div [this.index] .style.display = "block"; this.classname = "cur"}; }; }; }; };