distpicker使用记录

最新推荐文章于 2024-08-08 07:46:15 发布

原创最新推荐文章于 2024-08-08 07:46:15 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#省市区 #插件

实践杂记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Distpicker插件的使用方法，包括引入必要的JS文件、页面DOM结构设置及JS初始化过程。同时分享了作者在实际应用中遇到的问题及解决办法。

今天使用distpicker遇到了一些问题，记录一下。
插件地址

使用说明

需要引入的 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>

页面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>

js 初始化

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

数据回显

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