Esta é uma seleção suspensa de dados personalizada imitando CTRIP, que descreve alguns parâmetros mais importantes, o que é conveniente para iniciantes
/* *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 gerando a tag*/ 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: [], outros: []} // Crie uma nova matriz para impedir Var Ydropdowns indefinidos = document.getElementById (ID); function pré -tratamento () {// Processar dados var catalogdata = []; var BrandData = []; var China = []; var estranho = []; para (var i em ydata) {if (ydata [i] [config.type] == null) catalogdata.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.alia] 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] + '; else estrago.push (str [0] + ';' + str [1] + ';' + str [2]); } if (bool) {data = China; retornar dados; } else {data = estranho; retornar dados; }} else {data = catalogData; retornar dados; // retorna dados}}; função jsondata (data_name, ida) {// Processe os dados retornados pelo pré -tratamento var title = []; // Defina a 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: [], outros: []}; // Crie uma nova matriz para impedir a indefinida var yselect_box = document.createElement ("div"); // Crie uma nova caixa de seleção elemento pai yselect_box.id = Ida+"_ yselect_box"; var yselect_div = document.createElement ("div"); // contêiner com valor de retorno da letra var yselect_letter = document.createElement ("p"); // 26 Letter Container yselect_letter.id = Ida+'_ yselect_letter' var stylelink = document.createElement ("style") // crie pele, com dois conjuntos de peles para escolher //stylelink.innerhtml = '#'+id+'_ yelect_box {width: 100%; posição: absoluto; superior: 30px; esquerda: 0; Z-Index: 9999; Antecedentes: #FFFF}#'+ID+' _ YSELECT_BOX P {Background:#469BDE; Padding: 0 10px;}#'+Id+' _ Yselectort_box P Span.close {font {FONT: 16px; Yahei; cursor: ponteiro; posição: absoluto; topo: 0; direita: 0; cor:#f00}#'+id+' _ yselect_box .hide_tag {borda: 1px sólido#469bde; preenchimento: 5px; display: Nenhum; Min-Hight: 100px; Max-Hight: 300px; Min-Width: 300px; Max-Width: 800px; Overflow: Auto}#'+Id+' _ Yselect_box pa {preenchimento: 5px; Linha-Hight: 28px; cor: #fff}#'+id+' '`` yselt; a {largura: 80px; display: bloco; decoração de texto: nenhum; preenchimento: 5px; altura da linha: 12px; tamanho da fonte: 12px; float: esquerda; cor:#444; transbordamento: escondido; Text-overflow: elipsis; White-Space: Nowrap;}#'+id+' _ yselect_box .hide_tag A: hover {Background:#469bde; cor: #fff;}#'+id+' _ yselect_box .cur {borda-bottom: 2px Solid#FAC51f}}}}}}}}}}}}}}}}}}}}}}} _ _ yselect_box .cur {borda-bottom: 2px Solid#FAC51f stylelink.innerhtml = '#'+ida+'_ yselect_box {width: 100%; min-lar: 500px; max-width: 800px; posição: absoluto; top: 30px; esquerda: 0; z-index: 9999; border: #fff; borda: 1px sólido; p {preenchimento: 0 10px;}#'+ida+' _ yselect_box p span.close {font: 16px/20px Microsoft yahei; cursor: Pointer; Posição: Absolute; top: 0; direita: 0; cor:#666}#'+ida+' _ yselect_box. Nenhum; Min-Hight: 50px; Max-Hight: 200px; Overflow: Auto}#'+Ida+' _ yeleclect_box pa {preenchimento: 5px; altura de linha: 28px; cor:#333; borda-bottom: 2px sólido #bb; font-weight: Bold#''+Idatom+'' _Box. a {largura: 80px; display: bloco; decoração de texto: nenhum; preenchimento: 5px; altura da linha: 12px; tamanho da fonte: 12px; float: esquerda; cor:#444; transbordamento: escondido; Texto-overflow: elipsis; espaço branco: Nowrap;}#'+ida+' _ yeleclect_box .hide_tag a: hover {background:#469bde; cor: #fff;}#'+ida+' _ yselect_box a.cur {borda-bottom: 2px Solid#46 para (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split (';') title.push (str [2] .Charat (0) .tolocaleuppercase ()) // julgue a letra inicial e atribui -a ao título}; for (var j no título) {if (name_list [tit [j]]) name_list [tit [j]]. push (data_name [j]); else name_list.other.push (data_name [j])} // Insira dados em name_list para (var k em name_list) {// Processe dados, separado por letras, oculte if (name_list [k] .length! href = "javascript:" onclick = "' + fn +' (this)" name = "' + name_list [k] [i] .split ('; '; Ahtml [k] += alhtml; }; 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); // inserir selecione na página yselect_box.getElementsByTagName ('p') [0] .getElementsByTagName ('span') [0] .OnClick = function yselect_close () {ydropdowns.removechild (yselect_box) ydropdowdowns.removechild (stremovechild); bool = false} // Clique para destruir selecionar yselect_close.close = função yselect_close (obool) {if (obool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (styleLink); bool = false retorno}; if (bool) {ydropdowns.removeChild (yselect_box) ydropdowns.removeChild (stylelink); }} // Destrua a função Selecionar Retornar YSELECT_CLOSE} JSONDATA (pré -tratamento (), id) NavList (id) função NavList (IDS) {// Função de processamento da tabula var div = document.getElementById (ids+'_ yselect_box'). getElementsByTagName ('div'); div [0] .style.display = "bloco"; a [0] .className = "curs"; 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 = "nenhum"; a [j] .className = ""; }; div [this.index] .style.display = "bloco"; this.className = "curs"}; }; }; }; };