ajax+jquery三级联动

最新推荐文章于 2021-08-06 15:25:41 发布

原创最新推荐文章于 2021-08-06 15:25:41 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #三级联动

前端专栏收录该内容

11 篇文章

订阅专栏

首先要明白什么是三级联动。举个例子来说：当你未选择省份的时候，后面的市区和县级的下拉框应该是没有内容的。只有当前一个下拉框有选择的省份或者市，才可以选择后面的。项目中，这些值也是数据字典存储在数据库中的。本例子从数据库中读取省市县。不多说了，直接上代码，看注释吧，挺详细的。。

html代码：

</body>

jquery代码：

//初始化下拉框
   function initValue(pid,flg){
       $.ajax({
          type:"post",
          url:"CityServlet",//查询处理数据的servlet
          data:{
              "pid":pid,//pid为父id
              "doWhat":"getInfo"
          },
          dataType:"json",//返回为json类型，返回的是json字符串
          success:function(data){
             var $select=$("#"+flg);//获取flg的下拉框
             $.each(data.list,function(index,current){
               var $option=$("<option></option>");//动态添加下拉框选项
               $option.prop("value",current.id);//给下拉框选项设置id,以便下一个下拉框根据选中的id作为父id查询
               $option.html(current.name);//给下拉框赋值
               $select.append($option);
             })
          },
          error:function(){
             alert("AJAX请求错误！");
          }
       })

}

$(function(){
       initValue("0", "province");
       //当选择省份的时候
       $("#province").change(function(){
          $("#city option:eq(0)").remove();//先把市的下拉框remove
          $("#county option:eq(0)").remove();//先把县的下拉框remove
          var pid=this.value;
          if("请选择"==pid){
             return;
          }
          initValue(pid, "city");
       })
       //当选择市级的时候
       $("#city").change(function(){
          $("#county option:eq(0)").remove();
          var pid=this.value;
          if("请选择"==pid){
            return;
          }
          initValue(pid, "county");
       })

   })

转载请注明出处，谢谢。