城市三级联动

地址选择器的初始化与数据赋值

最新推荐文章于 2020-10-09 15:52:29 发布

原创最新推荐文章于 2020-10-09 15:52:29 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#三级联动

日常工作同时被 2 个专栏收录

10 篇文章

订阅专栏

bootstrap

4 篇文章

订阅专栏

本文介绍了一个基于JavaScript的地址选择器组件的使用方法。通过加载distpicker.data.min.js和distpicker.min.js两个文件，实现了省市区三级联动的选择功能。文章详细展示了如何设置初始值，并通过解析地址字符串来自动填充省、市、区及详细地址字段。

<script type="text/javascript" src="../../static/media/js/address/distpicker.data.min.js"></script>
<script type="text/javascript" src="../../static/media/js/address/distpicker.min.js"></script>
//初始值
$("#distpicker").distpicker({
        autoSelect: false, //默认不自动填充
        province: '---- 所在省 ----',
        city: '---- 所在市 ----',
        district: '---- 所在区 ----'
    });
//修改数据赋值
var adress=result.user_info[0].Address.split('-')
                   
$('#Province').val(adress[0])
$("#Province").trigger("change");
$('#City').val(adress[1])
$("#City").trigger("change");
$('#Area').val(adress[2]);
                    
console.log(adress)
                    
$("#Address").val(adress[3]);

html

<div class="form-group">
     <label class="col-sm-3 control-label form-label">地址</label>
     <div class="col-sm-6">
          <div id="distpicker" style="width: 400px;margin-bottom: 20px;">
               <select id="Province"></select>
               <select id="City"></select>
               <select id="Area"></select>
          </div>
         <input type="text" class="form-control" id="Address" placeholder="详细地址">
     </div>
</div>