使用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();
});