Jquery AJAX使用父子功能创建select

时间:2016-01-01 21:19:52

标签: jquery html ajax

我的数据结构如下:

Forum
   Topic
      Post
   Subscriptions
   Polls
Members
   Email

等等。实际上,可以有无限数量的孩子。我想在页面加载时创建一个jquery ajax调用,以获取最外层的父项。然后,当我选择父母时,另一个ajax调用触发,让这个父母的子女在另一个中选择是否存在。然后,如果我点击那个孩子,另一个ajax调用会触发,获取所选孩子的孩子,依此类推。然后,当我点击不同的父级时,所有选择的前一个父级消息。

我如何编码?

到目前为止,我有这个:(parent_id = 0表示:得到最外面的父母)

$.ajax({
    method: 'get',
    url: 'ajaxLoad.php?action=manage-permissions&mod=_get-entities&parent_id=0',
    success: function (response){
        $("#entities").html(response);
    }   
});    

//The below line does not work because the call is asynchronous and i prefer to keep it that way as its recommended
$(".parent_select").change(function(){
    alert("Chose");
});

更新1:

我已经重构了代码,所以看起来像这样:

var visible_entities = [];
var active_entity = 0;

function myCallback(result)
{
    if (result != "no_children")
    {
        $("#entities").append(result);      
    }

    $(".parent_select").change(function(){

        visible_entities.push( $(this).attr('rel') );

        foo(myCallback,$(this).val());

        for (i=0; i <= visible_entities.length; i++)
        {

        }

        active_entity = $(this).val();
    });    
}

function foo(callback,id)
{
    $.ajax({
        method: 'get',
        url: 'ajaxLoad.php?action=manage-permissions&mod=_get-entities&parent_id='+id,
        success: myCallback   
    });     
}

foo(myCallback,0);

现在我让每个孩子都进入一个新的选择标签。但是当我换到另一个父母时,选择会成倍增长而且仍然不会消失。

1 个答案:

答案 0 :(得分:1)

我试图理解你的问题,所以我找到了一个解决方案,当然,因为我没有客户端,我用对象客户端模拟它。

var JSONSampleMenu = {
  'Forum': {'Topic': {'Post': null}, 'Subscriptions': null, 'Polls': null},
  'Members': {'Email': null}
};
var urlSample = URL.createObjectURL(new Blob([JSON.stringify(JSONSampleMenu, undefined, 4)], {type: 'application/json'}));


function myCallback(result, obj) {
  var mySubMenu = '<ul>';
  $.each(result, function(index, element) {
    mySubMenu += '<li class="menuItem">' + index + '</li>';
  });
  mySubMenu += '</ul>'
  obj.append(mySubMenu);
}
function getObject(response, menuName) {
  for(o in response) {
    if (o ==  menuName) {
      if (response[menuName])
        return response[menuName];
      else
        return null;
    }
  }
  for(o in response) {
    if (o != null) {
      var obj = getObject(response[o], menuName);
      if (obj != null) {
        return obj;
      }
    }
  }
  return null;
}

function toggleMenu(e, afterCreate) {
        var obj = $(e.target);
        if (obj.parent().attr('id') == 'menu') {
            if (afterCreate) {
                obj.siblings().children().toggle();
            } else {
                obj.children().toggle();
                obj.siblings().children().toggle();
            }
        } else {
            if (!afterCreate) {
                obj.children().toggle();
            }
        }
}

$(function () {
  $(document).on('click', ".menuItem", function(e){
    e.stopImmediatePropagation();
    var obj = $(this);
    if (obj.children().length == 0) {
      var menuName = this.innerText;
      var menuDepth = obj.parents('#menu');
      $.ajax({
        method: 'get',
        url: urlSample,
        success: function (response) {
          var menuObj = getObject(response, menuName);
          if (menuObj != null) {
            myCallback(menuObj, obj);
            toggleMenu(e, true);
          }
        }
      });
    } else {
      toggleMenu(e, false);
    }
  });
});
<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<ul id="menu">
    <li class="menuItem">Forum</li>
    <li class="menuItem">Members</li>
</ul>