小付博客

js省市区 级联 插件

发布时间：2017-07-24 编辑：小付 浏览（1115） 评论（0）

插件地址




使用说明

1. 需要引入的 js 文件

<script type="text/javascript" src="./././js/jquery/distpicker.data.js"></script>
<script type="text/javascript" src="./././js/jquery/distpicker.js"></script>
<script type="text/javascript" src="./././js/jquery/main.js"></script>

   2. 页面dom

<div data-toggle="distpicker">              
    <select id="eprovinceName" data-province="浙江省" name="provinceName"></select>
    <select id="ecityName" data-city="杭州市" name="cityName"></select>
    <select id="edistrictName" data-district="西湖区" name="districtName"></select>
 </div>

  3. js 初始化


$(function(){$("#distpicker").distpicker('destroy');
$("#distpicker").distpicker({
    province: '省份名',
    city: '城市名',
    district: '区名',
    autoSelect: true,
    placeholder: false});
});

  4. 数据回显


        $("#eprovinceName").val(data.provinceName);
        $("#eprovinceName").trigger("change");
        $("#ecityName").val(data.cityName);
        $("#ecityName").trigger("change");
        $("#edistrictName").val(data.districtName);
        $("#edetailAddress").val(data.detailAddress);