Esta es una selección desplegable de datos personalizada que imita Ctrip, que describe algunos parámetros más importantes, que es conveniente para principiantes a
/ * *ID: ID El elemento principal del complemento actual *Datos: Datos seleccionados JSON (formato JSON) *Bool: Datos verdaderos/falsos Si desea separar los datos en dos valores Verdadero *Configurar el objeto interno de los datos (tipo Tipo Toma efecto cuando bool es verdadero) {ID: campo de datos, nombre: nombre de datos, nombre de datos: Nombre de datos First Letter, Type: Tipo de datos} *Fn: Función Fn () {{{{{{{{{{{{{{{{{{{{ etiqueta*/ 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: [], otros: []} // Cree una nueva matriz para evitar var ydropdowns indefinidos = document.getElementById (id); function pretratment () {// Process Data var catalogData = []; var brandData = []; var China = []; var extranjero = []; para (var i en ydata) {if (ydata [i] [config.type] == null) catalogData.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.alias]) de lo contrario 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 extranjero.push (str [0] + ';' + str [1] + ';' + str [2]); } if (bool) {data = China; devolver datos; } else {data = extranjero; devolver datos; }} else {data = catalogData; devolver datos; // Datos de retorno}}; function jsondata (data_name, ida) {// procesa los datos devueltos por pretratamiento var title = []; // Defina la letra inicial 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: [], otros: []}; // Cree una nueva matriz para evitar var yselect_box infinados = document.createElement ("div"); // Crear un nuevo cuadro de selección Elemento principal yselect_box.id = Ida+"_ yselect_box"; var yselect_div = document.createElement ("div"); // contenedor con valor de retorno de letra var yselect_letter = document.createElement ("p"); // contenedor de 26 letras yselect_letter.id = ida+'_ yselect_letter' var stylelink = document.createElement ("style") // Crea skin, con dos conjuntos de máscaras para elegir entre //stylelink.innerhtml = '#'+id+'_ yselect_box {width:: 100%; posición: Absolute; superior: 30px; izquierda: 0; z-index: 9999; fondo: #ffff}#'+id+' _ yselect_box p {background:#469bde; padding: 0 10px;}#'+id+' _ yselect_box p span.close {font: 16px/20px microsoft Yahei; cursor: puntero; posición: absoluto; arriba: 0; derecha: 0; color:#f00}#'+id+' _ yselect_box .hide_tag {borde: 1px sólido#469bde; relleno: 5px; pantalla: ninguno; 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+' _ yyselect_box. a {ancho: 80px; pantalla: bloque; text-decoración: ninguno; relleno: 5px; line-aguja: 12px; font-size: 12px; float: izquierda; color:#444; desbordamiento: Hidden; Text-Overflow: Ellipsis; White-Space: Nowrap;}#'+id+' _ yselect_box .hide_tag a: hover {fondos:#469bde; color: #fff;}#'+id+' _ yselect_box .cur {border-bottom: 2px sólido#fac51f} '; stylelink.innerhtml = '#'+ida+'_ yselect_box {width: 100%; min-width: 500px; max-width: 800px; posicion: absoluta; top: 30px; izquierda: 0; Z-Index: 9999; fondo: #ffff; border: 1px sólido #ddd;}#'+'+' '+' » p {relleno: 0 10px;}#'+ida+' _ yselect_box p span.close {font: 16px/20px Microsoft yahei; cursor: pointer; posicion: absoluta; top: 0; right: 0; color:#666}#'+ida+' _ yselect_box .hide_tag {padding: 5px; Ninguno; min-height: 50px; max-height: 200px; overflow: auto}#'+ida+' _ yselect_box pa {relleno: 5px; line-height: 28px; color:#333; border-bottom: 2px sólido #bbb; font-weight: bold}#'+ida+' _ y y y y bottom. a {ancho: 80px; pantalla: bloque; text-decoración: ninguno; relleno: 5px; line-aguja: 12px; font-size: 12px; float: izquierda; color:#444; desbordamiento: Hidden; text-overflow: ellipsis; white-space: nowrap;}#'+ida+' _ yselect_box .hide_tag a: hover {fondos:#469bde; color: #fff;}#'+ida+' _ yselect_box a.cur {border-bottom: 2px sólido#469bde; color:#469bde} '; for (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split (';') title.push (str [2] .charat (0) .tolocaleuppercase ()) // juzga la letra inicial y asigna a título}; for (var j en título) {if (name_list [tit [j]]) name_list [tit [j]]. Push (data_name [j]); else name_list.other.push (data_name [j])} // Insertar datos en name_list para (var k en name_list) {// Process Data, separado por letras, escondido if (name_list [k] .length! = 0) {for (var i = 0; i <name_list [k] .length; i ++) {var allhtml = '<a href » 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; Ydropdowns.appendChild (yselect_box); Ydropdowns.appendChild (stylelink); // Insertar Seleccionar en la página YSelect_Box.GetElementsByTagName ('P') [0] .getElementsByTagName ('span') [0] .OnClick = function yselect_close () {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylellink); bool = false} // Haga clic para destruir seleccionar yselect_close.close = function yselect_close (obool) {if (obool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); bool = falso return}; if (bool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); }} // Destruir la función seleccionar return yselect_close} jsondata (pretratratment (), id) navlist (id) función navlist (ids) {// Tab de pestaña Función de procesamiento var a = document.getElementById (IDS+'_ yselect_letter'). GetElementsByTagName ('a'); var div = document.getElementById (ids+'_ yselect_box'). getElementsBytagName ('div'); div [0] .style.display = "bloque"; 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 = "ninguno"; a [j] .classname = ""; }; div [this.index] .style.display = "bloque"; this.classname = "cur"}; }; }; }; };