使用和下载地址: http://www.jq22.com/jquery-info8054
一、引入Distpicker.js Distpicker.data.js
二、html结构初始化
<div data-toggle="distpicker" id="address">
<select></select><!-- 省 -->
<select></select><!-- 市 -->
<select></select><!-- 区/县 -->
</div>
三、修改全局Distpicker的参数
$.fn.distpicker.setDefaults({
autoSelect: false,
province: '----选择省 ----', //修改select框默认文字
city: '---- 选择市 ----',
district: '---- 选择区/县 ----'
});
四、重置select框
$(‘#address’).distpicker('reset'); //或
$(‘#address’).distpicker('reset', true);
destroy() //销毁插件实例。
五、获取被选中的地址码
规则为: 如果三个都被选中,则只返回第三个“区/县“的code码; 如果只有前两个被选中,则只返回第二个“市”的code码;
如果只有第一个被选中,则只返回第一个“省”的code码
function addressChange(id){;
var first=$('#'+id).find('select:first-child'); //获取select框
var second=$('#'+id).find('select:first-child').next();
var third=$('#'+id).find('select:last-child');
//上面这段也可以改为select:eq(0)这种形式
var firstCode=first.find('option:selected').attr('data-code'); //获取被选中的option的属性值
var secondCode=second.find('option:selected').attr('data-code');
var thirdCode=third.find('option:selected').attr('data-code');
var code="";
if(third.find('option:selected').index() != 0){ //如果第3个select被选中,返回第3个的值
code=thirdCode;
}else{
if(second.find('option:selected').index() != 0){ //如果第2个select被选中,返回第2个的值
code=secondCode;
}else{
code=firstCode;
}
};
return code;//返回最终获取的code码
};
六、编辑或详情页面根据code码进行回显操作
function address(editId,code){
var first=$('#'+editId).find('select:first-child'); //获取select框
var second=$('#'+editId).find('select:first-child').next();
var third=$('#'+editId).find('select:last-child');
var province = code.substr(0,2)+'0000'; //省
var city = code.substr(0,4)+'00'; //市
var district = code.substr(0,6); //区/县
first.find('option[data-code="'+province+'"]').attr("selected","selected").trigger('change');
second.find('option[data-code="'+city+'"]').attr("selected","selected").trigger('change');
third.find('option[data-code="'+district+'"]').attr("selected","selected").trigger('change');
}