Recentemente, compilei algumas páginas móveis de categorias de formulários e encontrei uma seleção de ligação entre províncias, cidades e distritos. Originalmente, eu queria usar o provincial, municipal e distritos anteriores do PC na biblioteca pública, mas descobri que o efeito do lado do PC no telefone celular era insatisfatório demais. O design não deu um efeito de design específico, então tive que compilar o efeito de seleção provincial, municipal e distrital de seleção por mim. O estilo usa o efeito do telefone celular. Eu sinto que o efeito do estilo está certo e pode ser usado. Os dados ainda são usados pelos dados do PC, mas eu apenas reescrevi os componentes. O efeito do código é o seguinte:
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 executar}; área de função (opções) {options = $ .extend ({}, __defaults__, opções); var que = this; that.wrapper = $ (options.wrap); that.Selectarr = that.wrapper.data ('padrão')? that.wrapper.data ('padrão'). split (','): [110000,110100,110101]; // that.items = options.items; that.itemname = options.itemname; that.callback = options.callback; that.setValue (); that.events (); that.default = that.wrapper.data ('default'); // saída padrão da província, cidade e ID do distrito que.ValidInput = $ ("##area-area"); var valdalVal = that.default! == indefinido? that.default: ''; that.validInput.val (ValidVal); } Área.prototype = {construtor: área, // Crie Selecionar e produzir os dados correspondentes CreateItems: function (ItemName, Data, SelectId) {var que = this; // Se o valor padrão padrão não for emitido, o padrão adiciona um prompt de preenchimento correspondente para selecionar var html = '<select name = "'+itemName+'">'+(that.default === undefined? '<Opção value.index]+itemName+' "Selected =" Selected "> '+that.itMame [thathat.ind.ind.ind.InMex]+' '' Selected =" Selected "> '' that.itame [thats.s.ind.ind.ind.ind.InMex] para (var k em dados) {html += '<opção value = "' +dados [k] .id +'"' +(selectId === Data [k] .id? 'Selected = "Selected"': '') +'>' +Data [k] .Name +'</pption>'; } html += '</select>'; retornar html; }, // Defina o valor inicial setValue: function () {var que = this, html = ''; $ .ECH (that.SelectRarr, function (index, k) {that.index = index; html += that.createItems (that.items [index], that.getData (that.itemss [index], that.selectRr [index-1); === 'Província') {return data.provinces || []; // Informações do padrão não requer PID} if (type === 'City') {return data.cities [pid] || []; } if (type === 'Area') {return data.areas [pid] || []; }}, // obtenha selecione o valor do índice getItemIndex: function (type) {var que = this; for (var i = 0, l = that.items.length; i <l; i ++) {if (that.items [i] == tipo) {return i; }}}; var $ this = select, anterior = $ this.val (), $ type = $ this.attr ('nome'), $ nxtType = ''; if ($ type! = 'Area') {$ nxtType = that.items [that.getItemIndex ($ type) +1]; var dados = that.getData ($ nxtType, prev), html = that.createItems ($ nxtType, dados, previd), nextSelect = $ ('selecione [name = "'+$ nxtType+'"]'); if ($ this.siblings ('selecione [name = "'+$ nxtType+'"]'). Comprimento> 0) {nextSelect.remove (); } $ this.after (html); NextSelect.find ('Opção: primeiro'). Prop ('selecionado', true); $ ('selecione [name = "'+$ nxtType+'"]'). Trigger ('alteração'); } else {that.validInput.val ($ this.val ()). trigger ('validate')} that.index = that.getItemIndex ($ type); // Função de retorno de chamada se após o acionamento de alterações puder ser definido se (that.callback) {that.callback.call (this, select, that.getItemIndex ($ type)); }}, eventos: function () {var que = this; // Selecione Alterar evento $ doc.on ('alteração', '. Area-container Select', function () {that.setItemval ($ (this));})}} module.exports = área;Código HTML:
Copie o código do código da seguinte forma: <input type = "hidden" name = "defaultArea" value = "" id = "area padrão"> // campos necessários, a fim de adicionar verificação de verificação verificação do gatilho
<div data data-default = ""> </div>
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.