Baru -baru ini, saya telah menyusun beberapa halaman seluler dari kategori formulir dan menemukan pilihan keterkaitan antara provinsi, kota dan distrik. Awalnya saya ingin menggunakan provinsi, kota, dan distrik provinsi PC sebelumnya di perpustakaan umum, tetapi saya menemukan bahwa efek sisi PC pada ponsel terlalu tidak memuaskan. Desainnya tidak memberikan efek desain khusus, jadi saya harus menyusun seleksi efek provinsi, kota, dan seleksi kabupaten asli. Gaya menggunakan efek ponsel. Saya merasa bahwa efek gayanya tepat dan dapat digunakan. Data masih digunakan oleh data PC, tetapi saya baru saja menulis ulang komponen. Efek kode adalah sebagai berikut:
var $ = require('jquery'), $window = $(window), data = require('./data-new'), $doc = $(document);var __DEFAULTS__ = { wrap:'', itemName: ['Province', 'City', 'area'], items: ['province', 'city', 'area'], callback: function(field, index) {} // Click to switch to execute}; Area fungsi (opsi) {options = $ .Extend ({}, __DefaultS__, opsi); var itu = ini; that.wrapper = $ (options.wrap); that.selecarr = that.wrapper.data ('default')? that.wrapper.data ('default'). split (','): [110000.110100.110101]; // that.items = options.items; that.itemname = options.itemname; that.callback = options.callback; itu.setValue (); itu.events (); that.default = that.wrapper.data ('default'); // output default dari provinsi, kota dan distrik ID that.validInput = $ ("#Default-Area"); var validval = that.default! == tidak terdefinisi? That.default: ''; that.validInput.val (validval); } Area.prototype = {constructor: Area, // Buat pilih dan output data createTems: function (itemName, data, selectId) {var that = this; // Jika nilai default default bukan output, default menambahkan prompt pengisian yang sesuai untuk memilih var html = '<pilih name = "'+itemName+'">'+(that.default === tidak terdefinisi? '<Nilai opsi = "'+itemName+'" dipilih = "dipilih"' '; untuk (var k dalam data) {html += '<option value = "' +data [k] .id +'"' +(selectid === data [k] .id? 'dipilih = "dipilih"': '') +'>' +data [k] .name +'</tiption>'; } html += '</select>'; mengembalikan html; }, // atur nilai awal setValue: function () {var that = this, html = ''; $ .Each (that.selecrarr, function (index, k) {that.index = index; html += that.createitems (that.items [index], that.getData (that.items [index], that.selecrarr [index-1]), k) get that.wrappers.pon (html) {html) {html) {html) {html) {html) {html) {html) {html) {html) 'provinsi') {return data.provinces || []; // Informasi pola tidak memerlukan pid} if (type === 'city') {return data.cities [pid] || []; } if (type === 'Area') {return data.areas [pid] || []; }}, // dapatkan pilih nilai indeks getItemIndex: function (type) {var that = this; untuk (var i = 0, l = that.items.length; i <l; i ++) {if (that.items [i] == type) {return i; }}}, // Saat perubahan dipicu, pilih nilai berikutnya untuk memulai kembali setItemVal: function (pilih) {var that = this = this; var $ this = pilih, sebelumnya = $ this.val (), $ type = $ this.attr ('name'), $ nxtType = ''; if ($ type! = 'Area') {$ nxtType = that.items [that.getItemIndex ($ type) +1]; var data = that.getData ($ nxtType, previd), html = that.createeitems ($ nxtType, data, previd), nextSelect = $ ('pilih [name = "'+$ nxtType+'"]'); if ($ this.siblings ('pilih [name = "'+$ nxtType+'"]'). Panjang> 0) {nextSelect.remove (); } $ this.after (html); nextSelect.find ('opsi: pertama'). prop ('dipilih', true); $ ('pilih [name = "'+$ nxtType+'"]'). Trigger ('ubah'); } else {that.validInput.val ($ this.val ()). Trigger ('validate')} that.index = that.getIteMIndex ($ type); // fungsi panggilan balik jika setelah pemicu perubahan dapat diatur if (that.callback) {that.callback.call (ini, pilih, that.getitemIndex ($ type)); }}, events: function () {var that = this; // Pilih ubah event $ doc.on ('ubah', '. Area-container pilih', function () {that.setitemVal ($ (this));})}} module.exports = area;Kode HTML:
Salin kode kode sebagai berikut: <input type = "hidden" name = "defaultarea" value = "" id = "default-rea"> // bidang yang diperlukan, untuk menambahkan verifikasi verifikasi verifikasi verifikasi verifikasi pemicu verifikasi
<Div Data-Default = ""> </div>
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.