Distpicker 省市区地址三级联动插件

关注

原创最新推荐文章于 2021-12-26 09:58:49 发布 4.2k 阅读 AI 写同款· GEO 优化 ›

distpicker.js制作省市区三级联动 1.html <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .txzlLi { margin... 阅读详情

使用和下载地址: 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');
}