Это настраиваемое раскрывающееся выбор данных, подражающий CTRIP, который описывает некоторые более важные параметры, что удобно для начинающих
/ * *Идентификатор: идентификатор: родительский элемент текущих данных плагина *: Выбранные данные JSON (формат JSON) *Bool: True/False Data, если вы хотите разделить данные на два значения True *Конфигурация: Настройте внутренний объект данных (тип вступает 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: [], другие: []} // Создать новый массив для предотвращения неопределенного var ydropdowns = document.getElementbyId (id); function pretreatment () {// обработать данные var catalogdata = []; var branddata = []; var China = []; var foreign = []; для (var i in 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 vilery.push (str [0] + ';' + str [1] + ';' + str [2]); } if (bool) {data = china; вернуть данные; } else {data = foreign; вернуть данные; }} else {data = catalogdata; вернуть данные; // возвращать данные}}; Функция jsondata (data_name, ida) {// обработать данные, возвращаемые предварительной обработкой var title = []; // Определите начальную букву 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: [], другие: []}; // Создать новый массив, чтобы предотвратить неопределенную 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: width: width: width: width: width: 100%; позиция: абсолютно; top: 30px; слева: 0; z-index: 9999; фон: #ffff}#'+id+' _ yselect_box p {№ 469bde; Padding: 0 10px;}#'+id+' _ yselect_box p span.close {font: 16px/20px microsoft. Yahei; cursor: pointer; position: absolute; top: 0; справа: 0; цвет:#f00}#'+id+' _ yselect_box .hide_tag {border: 1px solid#469bde; Padding: 5px; отображение: none; min-height: 100px; max-height: 300px; min-width: 300px; max-width: 800px; overflow: auto}#'+id+' _ yselect_box pa {padding: 5px; line-hight: 28px; color: #ff}#'+' _ yselect_box. a {width: 80px; дисплей: block; text-decoration: none; Padding: 5px; Line-Hight: 12px; размер шрифта: 12px; float: left; цвет:#444; переполнение: скрыто; Text-overflow: ellipsis; белое пространство: nowrap;}#'+id+' _ yselect_box .hide_tag a: hover {founal:#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; позиция: абсолют; верх: 30px; слева: 0; z-index: 9999; фон: #fff; граница: 1px solid #dddddddddd;#'+идентификатор. p {padding: 0 10px;}#'+ida+' _ yselect_box p span.close {font: 16px/20px microsoft yahei; coursor: pointer; позиция: Absolute; Top: 0; справа: 0; Color:#666}#'+ida+' _ yselect_box .hide_tag {Paddding: 5px: 5px: 5px: 5px: 5px: 5px. none; min-hight: 50px; max-height: 200px; переполнение: Auto}#'+ida+' _ yselect_box pa {padding: 5px; line-hight: 28px; color:#333; Border-bottom: 2px solid #bbb; font-weigh a {width: 80px; дисплей: block; text-decoration: none; Padding: 5px; Line-Hight: 12px; размер шрифта: 12px; float: left; цвет:#444; переполнение: скрыто; Text-overflow: ellipsis; белое пространство: nowrap;}#'+ida+' _ yselect_box .hide_tag a: hover {№ 469bde; color: #fff;}#'+ida+' _ yselect_box a.cur {border-bottom: 2px solid#469bde;#469 for (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split (';') title.push (str [2] .charat (0) .tolocaleuppercase ()) // судить первоначальное письмо и назначить его названию}; for (var j in title) {if (name_list [tit [j]]) name_list [tit [j]]. push (data_name [j]); else name_list.ether.push (data_name [j])} // вставить данные в name_list для (var k in name_list) {// обработка данных, отдельно буквами, скрыть if (name_list [k] .length! = 0) {for (var i = 0; i <name_list [k] .length; i ++) {varhtml = '<amist_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 = "'+ida+'_ yselect_letter'+'">'+yselect_letter.innerhtml+'<pan> x </span> </p>'+yselect_div.innerhtml; Ydropdowns.appendchild (yselect_box); Ydropdowns.appendchild (Stylelink); // Вставьте SELECT в страницу ySelect_box.getElementsBytagName ('p') [0] .getElementsBytagName ('span') [0] .onclick = function yeSelect_close () {ydropdowns.removechild (yelect_box) ydropdowns.removechild (stylelink); bool = false} // Нажмите, чтобы уничтожить Select yselect_close.close = function yselect_close (obool) {if (obool) {ydropdowns.removechild (yelect_box) ydropdowns.removechild (stylelink); bool = false return}; if (bool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); }} // Уничтожить функцию SELECT return yeSelect_close} jsondata (pretreatment (), id) vavlist (id) Функция Navlist (ids) {// Функция обработки вкладок var a = document.getElementbyid (ids+'_ Yelect_letter'). GetElementsbytagname ('a'); var div = document.getElementbyId (ids+'_ yselect_box'). getElementsbytagname ('div'); div [0] .style.display = "block"; 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 = "none"; a [j] .classname = ""; }; div [this.index] .style.display = "block"; this.classname = "cur"}; }; }; }; };