เมื่อเร็ว ๆ นี้ฉันได้รวบรวมหน้ามือถือของหมวดหมู่แบบฟอร์มและพบกับการเลือกการเชื่อมโยงระหว่างจังหวัดเมืองและอำเภอ เดิมทีฉันต้องการใช้ PC-Side Provincial, เทศบาลและเขตในห้องสมุดสาธารณะ แต่ฉันพบว่าผลกระทบของฝั่งพีซีในโทรศัพท์มือถือนั้นไม่น่าพอใจเกินไป การออกแบบไม่ได้ให้เอฟเฟกต์การออกแบบที่เฉพาะเจาะจงดังนั้นฉันต้องรวบรวมเอฟเฟกต์การคัดเลือกระดับจังหวัดเทศบาลและเขตการเลือกด้วยตัวเอง สไตล์ใช้เอฟเฟกต์ของโทรศัพท์มือถือ ฉันรู้สึกว่าเอฟเฟกต์สไตล์นั้นถูกต้องและสามารถใช้งานได้ ข้อมูลยังคงใช้โดยข้อมูลพีซี แต่ฉันเพิ่งเขียนส่วนประกอบใหม่ เอฟเฟกต์รหัสมีดังนี้:
var $ = ต้องการ ('jQuery'), $ window = $ (window), data = reghed ('./ data-new'), $ doc = $ (เอกสาร); var __defaults__ = {wrap: '', itemname: ['Province', 'City', 'arext) พื้นที่ฟังก์ชั่น (ตัวเลือก) {ตัวเลือก = $ .extend ({}, __defaults__, ตัวเลือก); var that = this; That.wrapper = $ (opotions.wrap); That.selectarr = That.wrapper.data ('default')? that.wrapper.data ('default'). แยก (','): [110000,110100,110101]; // that.items = opotions.items; that.iteMname = opotions.iteMname; that.callback = opotions.callback; that.setValue (); นั่น events (); That.default = That.wrapper.data ('default'); // เอาต์พุตเริ่มต้นของจังหวัดเมืองและอำเภอที่. validInput = $ ("#default-area"); var validval = that.default! == undefined? that.default: ''; that.validinput.val (ValidVal); } areames.prototype = {constructor: พื้นที่, // สร้างเลือกและส่งออกข้อมูลที่เกี่ยวข้อง createItems: function (itemName, data, selectId) {var that = this; // ถ้าค่าเริ่มต้นเริ่มต้นไม่ใช่เอาต์พุตค่าเริ่มต้นจะเพิ่มพรอมต์การเติมที่สอดคล้องกันเพื่อเลือก var html = '<เลือกชื่อ = "+itemName+'"> '+(that.default === undefined?' ตัวเลือก = "'+' สำหรับ (var k ในข้อมูล) {html += '<ตัวเลือกค่า = "' +data [k] .id +'' ' +(selectId === data [k] .id?' เลือก =" เลือก "':') +'>' +data [k] .name +' } html += '</select>'; ส่งคืน html; }, // ตั้งค่าค่าเริ่มต้น setValue: function () {var that = this, html = ''; $ .Each (that.selectarr, ฟังก์ชั่น (ดัชนี, k) {that.index = index; html += that.createitems (that.items [index], that.getData (that.items [index], that.selectarr [index-1]), k);}) (type === 'Province') {return data.provinces || - // ข้อมูลรูปแบบไม่จำเป็นต้องใช้ PID} ถ้า (type === 'City') {return data.cities [PID] || - } if (type === 'พื้นที่') {return data.areas [PID] || - }}, // รับค่าดัชนีเลือก GetItEmIndex: ฟังก์ชัน (ประเภท) {var that = this; สำหรับ (var i = 0, l = that.items.length; i <l; i ++) {ถ้า (that.items [i] == ประเภท) {return i; }}}, // เมื่อมีการเรียกใช้การเปลี่ยนแปลงให้เลือกค่าถัดไปเพื่อเริ่มต้นใหม่ setItemVal: ฟังก์ชั่น (เลือก) {var that = this; var $ this = select, previous = $ this.val (), $ type = $ this.attr ('ชื่อ'), $ nxtType = ''; if ($ type! = 'พื้นที่') {$ nxtType = That.items [That.getItemIndex ($ type) +1]; var data = That.getData ($ nxtType, previd), html = that.createitems ($ nxtType, ข้อมูล, previd), nextSelect = $ ('เลือก [name = "'+$ nxtType+'"]'); if ($ this.siblings ('เลือก [name = "'+$ nxtType+'"]'). ความยาว> 0) {nextselect.remove (); } $ this.fter (html); nextselect.find ('ตัวเลือก: First'). prop ('เลือก', true); $ ('เลือก [name = "'+$ nxtType+'"]'). ทริกเกอร์ ('เปลี่ยน'); } else {that.validinput.val ($ this.val ()). ทริกเกอร์ ('ตรวจสอบ')} that.index = that.getItemindex ($ ประเภท); // ฟังก์ชั่นการโทรกลับหากหลังจากการเปลี่ยนแปลงการเปลี่ยนแปลงสามารถตั้งค่าได้หาก (that.callback) {that.callback.call (นี่เลือกว่า GetItEmindex ($ type)); }}, เหตุการณ์: function () {var that = this; // เลือกการเปลี่ยนแปลงเหตุการณ์ $ doc.on ('เปลี่ยน', '. select select พื้นที่', function () {that.setItemval ($ (this));})}} module.exports = พื้นที่;รหัส HTML:
คัดลอกรหัสรหัสดังต่อไปนี้: <อินพุต type = "hidden" name = "defaultArea" value = "" id = "ฟิลด์ค่าเริ่มต้น"> // ฟิลด์ที่จำเป็นเพื่อเพิ่มการตรวจสอบการตรวจสอบการตรวจสอบ
<div data-default = ""> </div>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น