本文共 1580 字，大约阅读时间需要 5 分钟。

一、概述

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

先来看看其效果：

插件下载地址： 

 二、使用

1.引入bootstrap  css

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

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

   
      
    
        
     
          
      Province          
              
     
        
     
          
      City          
              
     
        
     
          
      District          
              
     
      
    
    
   

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()：销毁插件实例。

三、全部代码

    
      
      
         
          
   
    
    
     
     
      
      
       
       
        
        Province        
               
       
       
       
        
        City        
               
       
       
       
        
        District        
               
       
      
      
     
     
         
     
      
            
            
           
     
    
    
   
   
               

(完)

转载地址：http://whhgf.baihongyu.com/