Question

我有一个从数据库中填入ID的选择列表。我怎样才能让jQuery逐个获取每个ID，然后运行一个AJAX函数并将这些结果追加到相应的对象之后？

我知道如何进行AJAX调用并在对象之后执行追加，但我似乎无法弄清楚如何获取一个ID，运行AJAX调用，并且一旦完成后移动到下一个ID，然后重复，直到不再剩下。

以下是我的HTML示例：

<select id="thingsList">
    <optgroup label="Name1">
    	<option id="thing1" class="thingsListID" value="1" disabled="disabled"></option>
    </optgroup>
    <optgroup label="Name2">
    	<option id="thing2" class="thingsListID" value="2" disabled="disabled"></option>
    </optgroup>
    <optgroup label="Name3">
    	<option id="thing3" class="thingsListID" value="3" disabled="disabled"></option>
    </optgroup>
    <optgroup label="Name4">
    	<option id="thing4" class="thingsListID" value="4" disabled="disabled"></option>
    </optgroup>
</select>

Answer 1

只需更改loadData即可执行ajax请求并返回html片段

＆＃13;

function loadData(item, callback) {
  
  var html = "";
  
  for (var i = 0; i < (Math.random() * 1000) % 15; i++)
    html += "<option>" + (new Date()).toString() + "</option>"; // just for example
  // call you ajax here
  callback(html);
};

$("button").click(function () {
  $("#thingsList").find("optgroup").each(function (i, group) {
    var item = $(group).find("option:first");
    $(group).find("option").not(item).remove(); // if you need to erase and add again
    loadData(item, function (html) {
      $(html).insertAfter(item);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="thingsList">
    <optgroup label="Name1">
    	<option id="thing1" class="thingsListID" value="1" disabled="disabled"></option>
    </optgroup>
    <optgroup label="Name2">
    	<option id="thing2" class="thingsListID" value="2" disabled="disabled"></option>
    </optgroup>
    <optgroup label="Name3">
    	<option id="thing3" class="thingsListID" value="3" disabled="disabled"></option>
    </optgroup>
    <optgroup label="Name4">
    	<option id="thing4" class="thingsListID" value="4" disabled="disabled"></option>
    </optgroup>
</select>

<button>Reload</button>

＆＃13;

jQuery - 从一个对象获取ID，运行AJAX调用，获取下一个ID，重复

1 个答案: