Question

我基本上尝试从select中选择一个特定选项并将其移动到列表顶部。我现在要做的就是这个。

$("select[name=list]").find('option[value="car"]').insertBefore($("select[name=list]").find('option:eq(1)'));

由于某种原因，它执行两次，在顶部留下两个选项

<option value="car">Car</option>
<option value="car">Car</option>

不确定我做错了什么，也许有人知道？

谢谢。

Answer 1

来自jQuery文档：

如果以这种方式选择的元素被插入DOM中其他位置的单个位置，它将在目标（未克隆）之前移动，并返回由插入元素组成的新集合。

[..]

但是，如果有多个目标元素，则会在第一个目标元素之后为每个目标创建插入元素的克隆副本，并返回该新集合（原始元素加克隆）。

所以，有一个线索！我的猜测是你的选择器太多了，你选择了多个元素......甚至在文档中的另一个选择列表中。

您可以为您的示例提供更多HTML代码，但是让我展示一下我将如何做...

HTML

<select id='MyNiceList'>
 <option value='my_option_1'>First Option</option>
 <option value='my_option_2'>Second Option</option>
 <option value='my_option_3'>Third Option</option>
</select>

的js

$('#MyNiceList option[value="my_option_2"]').insertBefore('#MyNiceList option[value="my_option_1"]');

如果你注意我使用的选择器，我会消除选择多个元素的任何可能性，因此，我引用的第二部分的规则是符合的。

示例：

http://jsfiddle.net/sASCg/1/

我希望我在第一次答案时帮助你！：）

Answer 2

可能有2个问题

如果您插入一个新选项，那么您可能只有2个具有相同值的选项，因为您没有删除它。
第一项编号为“0”而不是“1”

http://jsfiddle.net/4kHuA/

  var $el = $("select[name=list]").find('option[value="car"]');
  $("select[name=list]").find('option[value="car"]').remove();
  $("select[name=list]").find('option:eq(0)').before($el);

Answer 3

：eq（1）将选择第二个元素而不是第一个元素。除此之外，您发布的代码应该可以正常工作：

var $select = $("#mySelect");
$mySelect.find('option[value="car"]')
         .insertBefore($mySelect.find('option:eq(1)'));

http://jsfiddle.net/B5W4B/

Answer 4

试试这个

$("select[name=list]").find('option[value="car"]').prependTo($("select[name=list]"));
$("select[name=list]").val('car')

jQuery移动特定选项顶部选择顶部（下拉）

4 个答案: