Recently, I have compiled some mobile pages of form categories and encountered a linkage selection between provinces, cities and districts. I originally wanted to use the previous PC-side provincial, municipal and districts in the public library, but I found that the effect of the PC-side on the mobile phone was too unsatisfactory. The design did not give a specific design effect, so I had to compile the selection native provincial, municipal and district selection effect by myself. The style uses the effect of the mobile phone. I feel that the style effect is just right and can be used. The data is still used by PC data, but I just rewritten the components. The code effect is as follows:
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}; function Area(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('default'); //Default output of province, city and district id that.validinput = $("#default-area"); var validval = that.default!==undefined?that.default:''; that.validinput.val(validval); }Area.prototype = { constructor: Area, //Create select and output the corresponding data createItems:function(itemname,data,selectId){ var that = this; //If the default default value is not output, the default adds a corresponding fill prompt to select var html = '<select name="'+itemname+'">'+(that.default === undefined ?'<option value="'+itemname+'" selected ="selected">'+that.itemName[that.index]+'</option> ' : ''); for (var k in data) { html += '<option value ="'+ data[k].id +'"'+(selectId === data[k].id ? 'selected = "selected"' : '')+'>' + data[k].name + '</option>'; } html += '</select>'; return html; }, //Set the initial value 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.append(html) }, //Get data getData: function(type, pid) { if (type === 'province') { return data.provinces || []; //Pattern information does not require pid } if (type === 'city') { return data.cities[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; } } }, //When change is triggered, select the next value to re-initialize setItemVal:function(select){ var that = this; var $this = select, previous = $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.createItems($nxtType,data,previd), 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('validate') } that.index = that.getItemIndex($type); //Callback function if after triggering change can be set if (that.callback) { that.callback.call(this, select, that.getItemIndex($type)); } }, events:function(){ var that = this; //select change event $doc.on('change','.area-container select',function(){ that.setItemVal($(this)); }) }}module.exports = Area;html code:
Copy the code code as follows: <input type="hidden" name="defaultArea" value="" id="default-area" > //Required fields, in order to add verification trigger verification
<div data-default=""></div>
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.