js select实现省市区联动选择
最近整了一一些表单类的移动页面,遇到了一个省市区的联动选择,本来想着用公用库里面的以前pc端的省市区选择组件,但是发现pc端的效果在手机端用效果太不理想,设计没给出具体的设计效果,只好自己整了select原生的省市区选择效果,样式使用手机自带的效果,感觉样式效果凑合还能用,数据还是用的pc的数据,只是把组件的给重写了一下,代码效果如下:
var$=require('jquery'), $window=$(window), data=require('./data-new'), $doc=$(document); var__DEFAULTS__={ wrap:'', itemName:['省','市','区/县'], items:['province','city','area'], callback:function(field,index){}//点击切换得时候才会执行 }; functionArea(options){ options=$.extend({},__DEFAULTS__,options); varthat=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');//默认输出省市区的id that.validinput=$("#default-area"); varvalidval=that.default!==undefined?that.default:''; that.validinput.val(validval); } Area.prototype={ constructor:Area, //创建select,输出相应的数据 createItems:function(itemname,data,selectId){ varthat=this; //如果默认的defalut值没输出,则默认的给select添加相应的填写提示 varhtml='<selectname="'+itemname+'">'+(that.default===undefined?'<optionvalue="'+itemname+'"selected="selected">'+that.itemName[that.index]+'</option>':''); for(varkindata){ html+='<optionvalue="'+data[k].id+'"'+(selectId===data[k].id?'selected="selected"':'')+'>'+data[k].name+'</option>'; } html+='</select>'; returnhtml; }, //设置初始值 setValue:function(){ varthat=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) }, //获取数据 getData:function(type,pid){ if(type==='province'){ returndata.provinces||[];//省份信息不需要pid } if(type==='city'){ returndata.cities[pid]||[]; } if(type==='area'){ returndata.areas[pid]||[]; } }, //获取select索引值 getItemIndex:function(type){ varthat=this; for(vari=0,l=that.items.length;i<l;i++){ if(that.items[i]==type){ returni; } } }, //触发change时候,select下一位值重新初始化 setItemVal:function(select){ varthat=this; var$this=select, previd=$this.val(), $type=$this.attr('name'), $nxtType=''; if($type!='area'){ $nxtType=that.items[that.getItemIndex($type)+1]; vardata=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); //触发change后可以设置回调函数 if(that.callback){ that.callback.call(this,select,that.getItemIndex($type)); } }, events:function(){ varthat=this; //selectchange事件 $doc.on('change','.area-containerselect',function(){ that.setItemVal($(this)); }) } } module.exports=Area;
html代码:
<inputtype="hidden"name="defaultArea"value=""id="default-area"> //必填项,为了添加验证触发验证用 <divclass="area-container"data-default=""></div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。