使用dropkick.js插件实现省市区三级联动效果

一、工作准备：

1、导入jquery.js

2、导入jquery.dropkick.js和dropkick.css（可以去官网下载最新的插件）

3、导入省市区的json数据（开发者自己json格式数据）

二、html代码部分：

<select class="select" id="province" name="province">
<option value="0">选择省份</option>
</select>
<select class="select" id="city" name="city">
<option value="0">选择城市</option>
</select>
<select class="select" id="area" name="area">
<option value="0">选择区域</option>
</select>

三、javascript代码部分：

$(function(){

//省市区三级联动
$('#province').dropkick({
//选项值改变函数
 change: function (proId) {
//清空市、区信息
$('#city').html("<option>请选择</option>");
$('#area').html("<option>请选择</option>");
$.each(city, function(k, p) {
if (p.ProID == proId) {
var option = "<option value='"+p.CityID+"'>"+p.CityName+"</option>";
$("#city").append(option);
}
});
//刷新市、区下拉列表
$('#city').dropkick('refresh');
$('#area').dropkick('refresh');
 }
});
$('#city').dropkick({
 change: function (cityId) {
$('#area').html("<option>请选择</option>");
$.each(District, function(k, p) {
if (p.CityID == cityId) {
 var option = "<option value='"+p.Id+"'>"+p.DisName+"</option>";
    $("#area").append(option);
}
});
$('#area').dropkick('refresh');
  }
});
$('#area').dropkick();

});