Question

我使用jquery ajax从php文件中获取数据。

data = <option>Peter</option><option>Maria</option>

我想使用jquery将此数据放在第一个选项

之后

<select>
   <option>Name</option>
</select>

我不能在select上使用html（），因为那时第一个选项将被删除。我可以使用什么jquery函数将它们放在第一个之后？

编辑：我不能使用追加，因为当我发出另一个请求并且数据是：

data = <option>Michael</option><option>Erik</option>

彼得和玛丽亚仍将在选择列表中。我能怎么做？我试过有一个

<div id=addhere></div>

在第一个选项之后然后使用html（）但它不起作用。奇怪的。我怎么能解决这个问题？

Answer 1

编辑：更新我的回复以在您更新后回答问题...

因此，假设您通过AJAX返回以下内容：

data = "<option>Michael</option><option>Erik</option>";

然后，您只需更新该数据，并使用html（）

data = "<option>Name</option>" + data;
$("#selectToModify").html(data);

以下是旧答案，仅供参考：

$("#divToAddTo").append(data);

html（）将替换元素的innerHTML。 append（）会将任何数据附加到innerHTML的末尾。

Answer 2

将原始选项保存在变量中，并附加AJAX响应和原始选项。

工作演示：

http://jsbin.com/otiro（可通过http://jsbin.com/otiro/edit编辑）

来源：

<select id="name">
  <option>Name</option>
</select>
<script type="text/javascript">
  var nameSelect = $('#name'), originalOptions = nameSelect.children();

  function handleAjaxResponse(response) {
    nameSelect.children().remove().end().append(originalOptions.add(response));
  }

  $.get("getNames.php", handleAjaxResponse);
</script>

Answer 3

我不确定我是否完全理解这个问题，但请查看jQuery reference以了解可用于插入内容的功能。 insertAfter可能是您正在寻找的人。

Answer 4

this question的已接受答案向您展示如何附加使用jQuery选择的选项，而不是替换现有选项。

Answer 5

查看jQuery docs append功能

Answer 6

我使用jquery remove函数删除所有兄弟姐妹到第一个选项之后我添加了新的选项...它工作得很好... =）

帮助jquery更新html中的内容

6 个答案:

工作演示：

来源：