使用dropkick.js插件实现省市区三级联动效果
来源:互联网 发布:淘宝开店如何防止被骗 编辑:程序博客网 时间:2024/06/06 01:47
一、工作准备:
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();
});
- 使用dropkick.js插件实现省市区三级联动效果
- 实现省市区三级联动js插件
- js实现省市区三级联动
- js实现省市区三级联动
- 省市区 三级联动 js 实现
- js实现省市区三级联动
- JS实现省市区三级联动
- 调用QQ官方JS插件实现省市区三级联动
- 使用mint-ui实现省市区三级联动效果
- Android实现省市区三级联动效果
- Android实现省市区三级联动效果Spinner
- 省市区三级联动插件的使用
- js省市区三级联动
- js省市区三级联动
- JS省市区三级联动
- js实现省市区三级联动select
- Vue如何使用vue-area-linkage实现地址三级联动效果 很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-ar
- 实现省市区三级联动
- ubuntu16.04下virtualenv环境中, django与mysql安装
- Ralink AP的WIFI组密钥多久更新一次?
- 高级知识点之进阶
- Android应用的基本组件介绍
- UI设计师不可不知的安卓屏幕知识
- 使用dropkick.js插件实现省市区三级联动效果
- 技术面试技巧
- Android studio导入项目(project)模块(module)
- WCF发布到IIS7问题的解决方案
- node.js 回调函数
- 项目问题
- word自动生成文献引用及参考文献
- 人事面试问题
- 行业认知