Jquery AJAX 创建具有父子功能的选择

Question

我有一个这样的数据结构:

Forum
   Topic
      Post
   Subscriptions
   Polls
Members
   Email

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

我该如何编码？

到目前为止我有这个:(parent_id=0 意思:得到最外层的 parent )

$.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);

现在我让每个 child 都在一个新的选择标签中。但是，当我更改为另一个 parent 时，选择呈指数增长并且仍然没有消失。

Answer 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>