省市区三级联动插件Distpicker--前端实现地区三级联动

最新推荐文章于 2025-05-07 15:03:05 发布

原创最新推荐文章于 2025-05-07 15:03:05 发布 · 4.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#省市区三级联动 #前端地区选择 #html地区选择

前端知识专栏收录该内容

14 篇文章

订阅专栏

Distpicker是一款用于快速实现省市区三级联动效果的插件，适用于前端开发。通过简单的引入JS文件和HTML结构设置，即可实现地区联动功能，支持自定义默认值和占位符，提供多种调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

省市区三级联动是项目中很常见到的小功能，实现起来可以分为前台实现和后台实现。后台实现起来有些麻烦，需要建表、插入中国地区数据和后台提供查询地区和子地区的数据接口。为了快速实现地区的省市区联动效果，前端实现起来就容易多了,并且点击效果比后台实现起来几乎没有延迟，今天给大家介绍一款省市区三级联动插件Distpicker。

先来看看其效果：

插件下载地址： http://www.jq22.com/jquery-info8054

二、使用

1.引入bootstrap css

<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">

2.引入js文件（distpicker.data.js是存放省市区数据的文件,distpicker.js是主要地区选择文件）

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

3.html结构(参考),关注三个<select>标签和一个<div data-toggle="distpicker>，其他都是样式相关结构。

    <form class="form-inline">
      <div data-toggle="distpicker">
        <div class="form-group">
          <label class="sr-only" for="province1">Province</label>
          <select class="form-control" id="province1"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="city1">City</label>
          <select class="form-control" id="city1"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="district1">District</label>
          <select class="form-control" id="district1"></select>
        </div>
      </div>
    </form>

4.调用两种方式：

4.1 直接在结构上添加属性

在容器<div>上添加data-distpicker即可

在<select>标签上添加可自定义默认值 <select data-province="浙江省"> <select data-city="杭州市"> <select data-district="西湖区">

4.2 通过js调用 $('#容器').distpicker()方法,启用插件(推荐方式)

4.2.1 自定义占位符()

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

4.2.2自定义默认值

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

4.2.3其他参数设置:

placeholder，默认值：true 是否需要首行占位符
autoSelect，默认值： ture 是否默认选择(默认选择北京)

4.2.4方法

$().distpicker('reset');重置select为初始状态。
$().distpicker('reset', true);
destroy()：销毁插件实例。

三、全部代码

<!DOCTYPE html>
<html lang="zh">
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>中国省市区地址三级联动jQuery插件</title> 
  <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" /> 
 </head> 
 <body> 
  <div class="jq22-container"> 
   <div class="container"> 
    <form class="form-inline"> 
     <div data-toggle="distpicker"> 
      <div class="form-group"> 
       <label class="sr-only" for="province1">Province</label> 
       <select class="form-control" id="province1"></select> 
      </div> 
      <div class="form-group"> 
       <label class="sr-only" for="city1">City</label> 
       <select class="form-control" id="city1"></select> 
      </div> 
      <div class="form-group"> 
       <label class="sr-only" for="district1">District</label> 
       <select class="form-control" id="district1"></select> 
      </div> 
     </div> 
    </form> 
    
    <div data-toggle="distpicker"> 
     <select></select> 
     <select></select> 
     <select></select> 
    </div> 
   </div> 
  </div> 
  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> 
  <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script> 
  <script src="js/distpicker.data.js"></script> 
  <script src="js/distpicker.js"></script>  
 </body>
</html>

(完)