Recientemente, he compilado algunas páginas móviles de categorías de formularios y he encontrado una selección de vinculación entre provincias, ciudades y distritos. Originalmente quería usar el anterior provincial, municipal y distritos del lado de la PC en la biblioteca pública, pero descubrí que el efecto del lado de la PC en el teléfono móvil era demasiado insatisfactorio. El diseño no dio un efecto de diseño específico, por lo que tuve que compilar el efecto de selección provincial, municipal y de distrito de la selección por mí mismo. El estilo utiliza el efecto del teléfono móvil. Siento que el efecto de estilo es el correcto y se puede usar. Los datos todavía son utilizados por los datos de la PC, pero acabo de reescribir los componentes. El efecto del código es el siguiente:
var $ = request ('jQuery'), $ window = $ (window), data = require ('./ data-new'), $ doc = $ (documento); var __defaults__ = {wrap: '', itemName: ['provincia', 'ciudad', 'área'], elementos: ['provincia', 'ciudad', 'área'], llamada: función: función (campo, campo) área de funciones (opciones) {opciones = $ .extend ({}, __defaults__, opciones); var que = esto; that.wrapper = $ (options.wrap); that.selectarr = that.wrapper.data ('predeterminado')? that.wrapper.data ('predeterminado'). Split (','): [110000,110100,110101]; // that.items = options.Items; que.itemname = options.itemname; que.callback = options.callback; que.setValue (); que.events (); that.default = that.wrapper.data ('predeterminado'); // Salida predeterminada de provincia, ciudad e identificación de distrito que.ValidInput = $ ("#AREA DEFAULD-AREA"); var validVal = that.default! == Undefined? That.default: ''; que.ValidInput.val (validVal); } Área.prototype = {constructor: área, // crea seleccionar y emitir los datos correspondientes createItems: function (itemname, data, selectId) {var que = this; // Si el valor predeterminado predeterminado no se emite, el valor predeterminado agrega un indicador de relleno correspondiente para seleccionar var html = '<select name = "'+itemname+'">'+(que.default === Undefined? '<Opción valor = "'+itemname+'" selected = "seleccionado">'+that.itemname [que.index]+'' '</option>': '); for (var k en datos) {html += '<option value = "' +data [k] .id +'"' +(selectID === data [k] .id? 'seleccionado = "seleccionado"': '') +'>' +data [k] .name +'</option>'; } html += '</select>'; devolver html; }, // Establezca el valor inicial setValue: function () {var that = this, html = ''; $ .each (that.selectarr, function (index, k) {that.index = index; html += that.createiteitems (que.items [index], that.getData (that.items [index], que.selectrin [index-1]), k);}) que.wrapper.append (html)}, // get data: getData (type, type, type, type, pAd (type, type, pAd (type, type, pAd type (type, pAd type (type, type, pAd type (type, type, pAd (type, pAd type (type, pAd type (type, type, pAd type (type, pAd type (type, pAd type (type, pAd tye === 'Provincia') {return data.Provinces || []; // La información del patrón no requiere PID} if (type === '' City ') {return data.cities [PID] || []; } if (type === 'área') {return data.areas [PID] || []; }}, // Get Seleccione el valor de índice getItemIndex: function (type) {var that = this; para (var i = 0, l = that.items.length; i <l; i ++) {if (that.items [i] == type) {return i; }}}, // Cuando se active el cambio, seleccione el siguiente valor para reinicializar setItemVal: function (select) {var que = this; var $ this = select, anterior = $ this.val (), $ type = $ this.attr ('name'), $ nxttype = ''; if ($ type! = 'área') {$ nxttype = that.items [that.getItemIndex ($ type) +1]; var data = that.getData ($ nxttype, previd), html = that.createItems ($ nxttype, data, previd), nextselect = $ ('select [name = "'+$ nxttype+'"]'); if ($ this.siblings ('select [name = "'+$ nxtType+'"]'). Longitud> 0) {nextSelect.remove (); } $ this.After (html); nextSelect.Find ('opción: primero'). prop ('seleccionado', true); $ ('select [name = "'+$ nxtType+'"]'). Trigger ('Change'); } else {that.validInput.val ($ this.val ()). Trigger ('validate')} that.Index = that.getItemIndex ($ type); // función de devolución de llamada si después de activar el cambio se puede establecer si (that.callback) {that.callback.call (this, select, that.getItemIndex ($ type)); }}, eventos: function () {var that = this; // Seleccionar el evento Cambiar $ doc.on ('Change', '. Area-Container select', function () {that.setItemVal ($ (this));})}} módulo.exports = área;Código HTML:
Copie el código del código de la siguiente manera: <input type = "Hidden" name = "defaultArea" value = "" id = "default-area"> // campos requeridos, a fin de agregar verificación de activación de activación verificación
<div data-default = ""> </div>
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.