ajax省市二级联动

最新推荐文章于 2021-08-05 15:17:07 发布

TWJ冲啊

最新推荐文章于 2021-08-05 15:17:07 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

文章标签： ajax json jquery

本文链接：https://blog.youkuaiyun.com/TWJ2298710017/article/details/104284224

本文介绍了如何利用Ajax技术，结合JSON数据和jQuery库，实现网页上的省市二级联动效果，达到动态加载和交互的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax省市二级联动

 $(function() {
    /*获取上面下拉框的数据  */
    $.ajax({
      url : '${basePath}/jobResumeController.do?queryJobCustomer',
      type : 'POST',
      dataType : 'JSON',
      async : false,
      delay : 250,
      cache : true,
      success : function(data) {
        /* jsonStr1是[]数组里面是对象 */
        /* var jsonStr1 = JSON.stringify(data); */
        var html = "";
        html = "<option value=''>---请选择--- </option>";
        $.each(data, function(index, value) { // 解析出data对应的Object数组  
          html += "<option value='"+value.id+"'>" + value.name
              + "</option>";
        });
        $("#recommendProject").html(html);
      }
    });

    /*获取下面下拉框的数据  */
     $.ajax({
      url : '${basePath}/jobResumeController.do?queryJobCustomerRecommend',
      type : 'POST',
      dataType : 'JSON',
      async : false,
      delay : 250,
      cache : true,
      success : function(data) { 
    /* jsonStr1是[]数组里面是对象 */
    /* var jsonStr1 = JSON.stringify(data); */
       var html = "";
      html = "<option value=''>---请选择--- </option>";
      $.each(data, function(index, value) { // 解析出data对应的Object数组  
        html += "<option value='"+value.id+"'>"+value.name+"</option>";
      });
      $("#recommendPost").html(html); 
    }
    });
  
    $('#recommendProject')
        .change(
            function() {
              /*获取上面下拉框的id    查岗位，根据获取的项目id取出对应的岗位*/
              var recommendProject = $('#recommendProject').val();
              //点击换一个省份的时候，上一个省下面的城市都需要移除
              $("#recommendPost option").remove();
              var html = "";
              $
                  .ajax({
                    url : '${basePath}/jobResumeController.do?queryJobCustomerRecommend',
                    type : 'POST',
                    data : {
                      recommendProjectId : recommendProject
                    },
                    dataType : 'JSON',
                    async : false,
                    delay : 250,
                    cache : true,
                    success : function(data) {
                      var jsonStr1 = JSON.stringify(data);
                       $.each(data, function(index, value) { // 解析出data对应的Object数组  
                        html += "<option value='"+value.id+"'>"+value.name+"</option>";
                      }); 
                      $("#recommendPost").html(html);  
                    }
                  });
              ;
            });
    
    $("#check").click(function() {
      $.ajax({
        url : '${basePath}/jobResumeController.do?queryJobPost',
        type : 'POST',
        dataType : 'JSON',
        async : false,
        delay : 250,
        cache : true,
        success : function(data) {
          alert(data);
           var jsonStr1 = JSON.stringify(data); 
           alert(jsonStr1);
          
          /* jsonStr1是[]数组里面是对象 */
          /* var jsonStr1 = JSON.stringify(data); */
           var html = "";
          $.each(data, function(index, value) { // 解析出data对应的Object数组  
            html += 
                        "<input type='checkbox' value='"+ value.typecode+"' name='jobPost'>" + value.typename
                       /*  "<span class='text'>" + value.typename + "</span>" +
                        "<span  style=''></span>" */
          });
          
          $("#add").html(html);  
        }
      });
    })
    
    
  });