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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。