jQuery简易三级联动

//省份下拉框加载事件

$(function(){

$.ajax({

url:"../getProvince",

type:"post",

dataType:"json",

success:function(data){

$.each(data,function(k,v){

$('#province').append(""+data.name+"");

});

}

});

});

//省份改变事件

$('#province').bind('change',function(){

//清楚城市下拉列表和区的下拉列表

$('#cityoption:gt(0)').remove();

$('#districtoption:gt(0)').remove();

//省份编号

varprovince_id = $('#province option:selected').val();

$.ajax({

url:"../getCityByProvinceId",

type:"post",

data:{"province_id":province_id},

dataType:"json",

success:function(data){

//获取到城市并追加到城市下拉列表

$.each(data,function(k,v){

$('#city').append(""+data.name+"");

});

}

});

});

//城市改变事件

$('#city').bind('change',function(){

//清楚区的下拉列表

$('#districtoption:gt(0)').remove();

//省份/城市编号

varprovince_id = $('#province option:selected').val();

varcity_id = $('#city option:selected').val();

$.ajax({

url:"../getDistrictByCityIdByAndProvinceId",

type:"post",

data:{

"province_id":province_id,

"city_id":city_id

},

dataType:"json",

success:function(data){

$.each(data,function(k,v){

$('#district').append(""+data.name+"");

});

}

});

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 4,066评论 0 9
  • 闲话少叙,先上图: 什么,还要代码? HTML: 选择区域 JS: // 城市级联选择 varcit...
    汪槑槑2017阅读 9,999评论 0 0
  • 一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 1)取得服务端当前时间 简单...
    奋斗的老王阅读 4,123评论 0 51
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,668评论 0 2
  • celery beat 按照间隔运行任务,被集群中可用的工作进程来运行。 添加周期任务: 或 crontab 例子...
    xncode阅读 5,341评论 0 1