ajax实现三级联动下拉菜单 ----- 转载https://www.cnblogs.com/mengshenshenchu/p/6852371.html

ajax实现三级联动下拉菜单：

　　目前自己应用场景：城市三级联动

　　逻辑就是写三个方法，让省找到市，市找到区

　　代码：

var citystr = "<select id='sheng'></select><select id='shi'></select><select id='qu'</select>";

$("#select").html(citystr);


 var qzDistrict = ""; // 区   // 发送定义的参数 不用管

//  获取省的option
function tiansheng() {   
   var node = ""  // 发送给后台的参数
    $.ajax({
          async: false, // 同步
          url: "xxxx",
          data: {"node": node},
          type: 'POST',
          dataType: 'json',
          success: funciton (data) {
              // 我这边接收过来后台的数据格式就是data.data是一个数组；
              for(var i=0;i<data.data.length;i++) {
                  $("#sheng").append("<option value='"+ data.data[i].id +"'>"+ data.data[i].name+ "</option>")
              }
              qzDistrict = $("#qu").val();
          }
    })
}      
//  获取市的option
function tianshi() {
            var node = $("#sheng").val();
            $.ajax({
                async:false,//同步
                cache: false,
                url: "xxxx",
                data: {"node": node},
                type: "POST",
                dataType: "json",
                success:function (data) {
                    for(var i=0;i<data.data.length;i++) {
                        $("#shi").append("<option value='"+ data.data[i].id +"'>"+ data.data[i].name+ "</option>")
                    }
                    qzDistrict = $("#qu").val();
                }
            })
        }     

//  获取区的option
 function tianqu() {
            var node = $("#shi").val();
            $.ajax({
                async: false,
                cache: false,
                url: "http://192.168.31.53:8005/find/cityList",
                data: {"node": node},
                type: "POST",
                dataType: "json",
                success:function(data) {
                    for(var i=0;i<data.data.length;i++) {
                        $("#qu").append("<option value='"+ data.data[i].id +"'>"+ data.data[i].name+ "</option>")
                    }
                    qzDistrict = $("#qu").val();
                }
            })
        }
// 执行
tiansheng();
tianshi();
tianqu();

 $(document).on('change','#sheng',function() {
            $("#shi").find("option").remove();   // 每次change 之后 必须清空 ！！！ 重要
            $("#qu").find("option").remove();   // 每次change 之后 必须清空 ！！！ 重要
            District = $("#qu").val();
            tianshi();
            tianqu();
});
        
$(document).on('change','#shi',function() {
            $("#qu").find("option").remove();  // 每次change 之后 必须清空 ！！！ 重要
            District = $("#qu").val();
            tianqu();
});


这样一个城市三级联动就ok了

ajax实现三级联动下拉菜单 ----- 转载https://www.cnblogs.com/mengshenshenchu/p/6852371.html

猜你喜欢