นี่คือการเลือกแบบดรอปดาวน์ข้อมูลที่กำหนดเองเลียนแบบ CTRIP ซึ่งอธิบายถึงพารามิเตอร์ที่สำคัญกว่าซึ่งสะดวกสำหรับผู้เริ่มต้น
/ * *id: id องค์ประกอบหลักของปลั๊กอินปัจจุบัน *ข้อมูล: JSON ข้อมูลที่เลือก (รูปแบบ JSON) *บูล: ข้อมูลจริง/เท็จหากคุณต้องการแยกข้อมูลออกเป็นสองค่าจริง *กำหนดค่า: กำหนดค่าวัตถุภายในของข้อมูล 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); ฟังก์ชั่นการปรับสภาพ () {// กระบวนการข้อมูล var catalogdata = []; var Branddata = []; var China = []; var ต่างประเทศ = []; สำหรับ (var i ใน ydata) {ถ้า (ydata [i] [config.type] == null) catalogdata.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+'; Branddata.push (ydata [i] [config.id]+';'+ydata [i] [config.name]+';'+ydata [i] [config.type])}; if (BrandData! = "") {สำหรับ (var i = 0; i <branddata.length; i ++) {var str = branddata [i] .split (';') ถ้า (str [3] == 0) china.push (str [0] + ';' + str [1] + '; else elger.push (str [0] + ';' + str [1] + ';' + str [2]); } ถ้า (บูล) {data = จีน; ส่งคืนข้อมูล } else {data = ต่างประเทศ; ส่งคืนข้อมูล }} 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 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 30px; ซ้าย: 0; z-index: 9999; พื้นหลัง: #ffff}#'+id+' _ yselect_box p {พื้นหลัง:#469bde; padding: 0 10px;}#'+id+' _ yselect_box p Span.close yahei; เคอร์เซอร์: ตัวชี้ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; สี:#f00}#'+id+' _ yselect_box .hide_tag {เส้นขอบ: 1px solid#469bde; padding: 5px; ไม่มี; ความสูงขั้นต่ำ: 100px; ความสูงสูงสุด: 300px; Min-Width: 300px; Max-Width: 800px; Overflow: Auto}#'+id+' _ yselect_box pa {padding: 5px; line-height: 28px; สี: #FFF}# A {width: 80px; display: block; การกำหนดข้อความ: ไม่มี; padding: 5px; line-height: 12px; ตัวอักษรขนาด: 12px; float: ซ้าย; สี:#444; overflow: ซ่อน; Text-Overflow: Ellipsis; White-Space: NowRap;}#'+id+' _ yselect_box .hide_tag a: hover {พื้นหลัง:#469bde; color: #fff;}#'+id+' _ yselect_box .cur stylelink.innerhtml = '#'+ida+'_ yselect_box {width: 100%; min-width: 500px; Max-Width: 800px; ตำแหน่ง: Absolute; Top: 30px; ซ้าย: 0; z-index: 9999; P {padding: 0 10px;}#'+ida+' _ yselect_box p span.close {ตัวอักษร: 16px/20px microsoft yahei; เคอร์เซอร์: pointer; ตำแหน่ง: Absolute; top: 0; ขวา: 0; สี:#666}#'+ida+' _ ไม่มี; min-height: 50px; สูงสุด-สูง: 200px; overflow: auto}#'+ida+' _ yselect_box pa {padding: 5px; line-height: 28px; สี:#333; border-bottom: 2px solid #bbb; A {width: 80px; display: block; การกำหนดข้อความ: ไม่มี; padding: 5px; line-height: 12px; ตัวอักษรขนาด: 12px; float: ซ้าย; สี:#444; overflow: ซ่อน; Text-Overflow: Ellipsis; White-Space: NowRap;}#'+Ida+' _ yselect_box .hide_tag a: Hover {พื้นหลัง:#469bde; color: #fff;}#'+ida+' _ yselect_box A.cur สำหรับ (var i = 0; i <data_name.length; i ++) {var str = data_name [i] .split (';') title.push (str [2] .charat (0) .tolocaleuppercase ()) // ตัดสินจดหมายเริ่มต้น สำหรับ (var j ในชื่อ) {ถ้า (name_list [tit [j]]) name_list [tit [j]]. push (data_name [j]); else name_list.other.push (data_name [j])} // แทรกข้อมูลลงใน name_list สำหรับ (var k ใน name_list) {// ข้อมูลกระบวนการแยกด้วยตัวอักษร, ซ่อนถ้า (name_list [k] .length! = 0) {สำหรับ (var i = 0; i <name_list [k] href = "javascript:" onclick = "' + fn +' (นี่)" 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_lectter.innerhtml+'<span> x </span> </p>'+yselect_div.innerhtml; ydropdowns.appendchild (yselect_box); ydropdowns.appendchild (Stylelink); // แทรกเลือกลงในหน้า yselect_box.getElementsByTagname ('p') [0] .getElementsByTagname ('span') [0] .onclick = function yselect_close () {ydropdowns.removechild (yselect_box) ydropdowns. bool = false} // คลิกเพื่อทำลาย select yselect_close.close = function yselect_close (obool) {ถ้า (obool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (stylelink); bool = การส่งคืนเท็จ}; if (bool) {ydropdowns.removechild (yselect_box) ydropdowns.removechild (Stylelink); }} // ทำลายฟังก์ชั่นเลือกส่งคืน yselect_close} jSondata (การปรับสภาพ (), id) navlist (id) ฟังก์ชั่น navlist (ids) {// แท็บแท็บฟังก์ชั่นการประมวลผลแท็บ var a = document.getElementById var div = document.getElementById (ids+'_ yselect_box'). getElementsByTagname ('div'); div [0] .style.display = "block"; a [0] .className = "cur"; สำหรับ (var i = 0; i <a.length; i ++) {a [i] .index = i; a [i] .onclick = function () {สำหรับ (var j = 0; j <a.length; j ++) {div [j] .style.display = "ไม่มี"; a [j] .className = ""; - div [this.index] .style.display = "block"; this.className = "cur"}; - - - -