Récemment, j'ai compilé certaines pages mobiles des catégories de formulaires et rencontré une sélection de liens entre les provinces, les villes et les districts. Je voulais à l'origine utiliser les précédents PC provinciaux, municipaux et districts de la bibliothèque publique, mais j'ai constaté que l'effet du côté PC sur le téléphone mobile était trop insatisfaisant. La conception n'a pas donné d'effet de conception spécifique, j'ai donc dû compiler l'effet de sélection provincial, municipal et de district indigène par moi-même. Le style utilise l'effet du téléphone mobile. Je pense que l'effet de style est juste et peut être utilisé. Les données sont toujours utilisées par les données PC, mais je viens de réécrire les composants. L'effet de code est le suivant:
var $ = required ('jQuery'), $ window = $ (window), data = require ('./ data-new'), $ doc = $ (document); var __defaults__ = {wrap: '', itemname: ['province', `` city '', `` région '], items: [' province ',' city ',' zone '], callback: function (champ, index)' zone de fonction (options) {options = $ .extend ({}, __defaults__, options); var that = this; that.wrapper = $ (options.wrap); that.selectarr = that.wrapper.data ('default')? that.wrapper.data ('default'). 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 ('par défaut'); // Production par défaut de l'ID de la province, de la ville et du district qui.validInput = $ ("# default-aaa"); var validval = that.default! == Undefined? that.default: ''; that.validinput.val (validval); } Area.prototype = {Constructor: Area, // Créer Select et Sortie Les données correspondantes CreateItems: fonction (itemName, Data, SelectId) {var that = this; // Si la valeur par défaut par défaut n'est pas sortie, la valeur par défaut ajoute une invite de remplissage correspondante pour sélectionner var html = '<select name = "' + itemName + '">' + (that.default === Undefined? '<Option value = "+ itemName +'" selected = "selected"> '+ that.itemname [that.index] +' </ option> ':' '); pour (var k dans les données) {html + = '<option value = "' + data [k] .id + '' '+ (selectId === data [k] .id?' selected =" select "':' ') +'> '+ data [k] .name +' </ option> '; } html + = '</lect>'; retour html; }, // Définissez la valeur initiale setValue: function () {var that = this, html = ''; $ .each (that.selectarr, function (index, k) {that.index = index; html + = that.createitems (that.items [index], that.getData (that.items [index], that.selectarr [index-1]), k);}) that.wrapper.Apnd (html)}, // get data getdata: fure (type === 'province') {return data.provincces || []; // Les informations du modèle ne nécessitent pas de pid} if (type === 'ville') {return data.cités [pid] || []; } if (Type === 'Area') {return data.areas [pid] || []; }}, // Get Select Index Value getItemIndex: function (type) {var that = this; for (var i = 0, l = that.items.length; i <l; i ++) {if (that.items [i] == type) {return i; }}}, // Lorsque la modification est déclenchée, sélectionnez la valeur suivante pour réinitialiser setItemVal: function (select) {var that = this; var $ this = select, précédent = $ this.val (), $ type = $ this.attr ('name'), $ nxtType = ''; if ($ type! = 'zone') {$ nxtType = that.items [that.getItemIndex ($ type) +1]; var data = that.getData ($ nxtType, Previd), html = that.createItems ($ nxtType, data, prédide), nextSelect = $ ('select [name = "' + $ nxttype + '"]'); if ($ this.siblings ('select [name = "' + $ nxttype + '"]'). Length> 0) {nextSelect.Remove (); } $ this.after (html); NextSelect.find ('Option: First'). Prop ('Selected', true); $ ('select [name = "' + $ nxttype + '"]'). Trigger ('change'); } else {that.validInput.val ($ this.val ()). Trigger ('valider')} that.index = that.getItemIndex ($ type); // Fonction de rappel si après le déclenchement, la modification peut être définie si (that.callback) {that.callback.call (this, select, that.getItemIndex ($ type)); }}, événements: function () {var that = this; // Sélectionner l'événement de modification $ doc.on ('change', '. Area-Container Select', function () {that.setItemVal ($ (this));})}} module.exports = zone;Code html:
Copiez le code de code comme suit: <input type = "HIDDEN" name = "defaultArea" value = "" id = "default-area"> // Fields requis, afin d'ajouter une vérification du déclencheur de vérification
<div data-default = ""> </div>
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.