关于Distpicker省市区的学习笔记

最新推荐文章于 2023-02-21 22:19:02 发布

面壁思过程

最新推荐文章于 2023-02-21 22:19:02 发布

阅读量523

点赞数

分类专栏： js 文章标签：关于Distpicker省市区的学习笔记 Distpicker动态的给省市区赋值

本文链接：https://blog.csdn.net/Candy_mi/article/details/98258095

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

1、通过data-toggle初始化属性

 <!-- 按data-toggle="distpicker"属性初始化 -->
  <div data-toggle="distpicker">
    <select></select>
    <select></select>
    <select></select>
  </div>


  <!-- 自定义占位符 -->
  <div data-toggle="distpicker">
      <select data-province="---- 选择省 ----"></select>
      <select data-city="---- 选择市 ----"></select>
      <select data-district="---- 选择区 ----"></select>
  </div>

  <!-- 自定义省市区 -->

  <div data-toggle="distpicker">
      <select data-province="浙江省"></select>
      <select data-city="杭州市"></select>
      <select data-district="西湖区"></select>
  </div>

2、使用方法初始化省市区

<body>
    <!-- 按$.fn.distpicker方法初始化 -->
    <div id="distpicker1">
        <select></select>
        <select></select>
        <select></select>
    </div>

    <!-- 自定义占位符 -->

    <div id="distpicker2">
        <select></select>
        <select></select>
        <select></select>
    </div>

    <!-- 自定义省市区 -->
    <div id="distpicker3">
        <select></select>
        <select></select>
        <select></select>
    </div>

</body>

<script>
    $("#distpicker1").distpicker();


    $("#distpicker2").distpicker({
        province: '---- 所在省 ----',
        city: '---- 所在市 ----',
        district: '---- 所在区 ----'
    });


    $("#distpicker3").distpicker({
        province: '浙江省',
        city: '杭州市',
        district: '西湖区'
    });
</script>

3、$.fn.distpicker方法

$().distpicker('destroy');

$().distpicker('reset');

$().distpicker('reset', true);

<body>
    <div id="distpicker1">
        <select></select>
        <select></select>
        <select></select>
    </div>

    <button class="change">更改省市区</button>
    <button class="reset">重置</button>
    <button class="resetdeep">重置深</button>

</body>

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/distpicker.js"></script>

<script>
    $("#distpicker1").distpicker({
        province: '浙江省',
        city: '杭州市',
        district: '西湖区'
    });


    $('.change').click(function () {
        $('#distpicker1').distpicker('destroy');//销毁实例
        $("#distpicker1").distpicker({  //动态赋值
            province: '北京市',
            city: '北京城区',
            district: '东城区'
        });
    })

    
    $('.reset').click(function () {
    $('#distpicker1').distpicker('reset');
       
    })


    $('.resetdeep').click(function () {
        $('#distpicker1').distpicker('reset', true);
    })



</script>

4、动态的给省市区赋值(注意先执行销毁方法)

 $('#distpicker1').distpicker('destroy');//销毁实例
        $("#distpicker1").distpicker({  //动态赋值
            province: '北京市',
            city: '北京城区',
            district: '东城区'
        });

面壁思过程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Distpicker省市区的学习笔记

1、通过data-toggle初始化属性  <div data-toggle="distpicker"> <select></select> <select></select> <select></...
复制链接

扫一扫