javascript jQuery将特定选项移动到选择顶部（下拉）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22330220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery move specific option top the top of select (drop down)
提问by devjs11
I am basicly trying to take a specific option from select and move it at the top of the list. What I am trying to do now is this.
我基本上是尝试从选择中获取特定选项并将其移动到列表顶部。我现在想做的是这个。
$("select[name=list]").find('option[value="car"]').insertBefore($("select[name=list]").find('option:eq(1)'));
and for some reason it executes twice leaving two options at the top
并且由于某种原因它执行两次在顶部留下两个选项
<option value="car">Car</option>
<option value="car">Car</option>
Not sure what am I doing wrong, maybe someone knows?
不知道我做错了什么，也许有人知道？
thank you.
谢谢。
回答by Vitox
From the jQuery Documentation:
来自 jQuery 文档：
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned) and a new set consisting of the inserted element is returned.
如果以这种方式选择的元素插入到 DOM 中其他位置的单个位置，它将在目标之前移动（未克隆），并返回由插入元素组成的新集合。
[..]
[..]
If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.
但是，如果有多个目标元素，则会在第一个目标之后为每个目标创建插入元素的克隆副本，并返回该新集合（原始元素加上克隆）。
So, there is a clue! My guess is that your selector, is too much embracing, and you are selecting more than one element... Even in another select list in the document.
所以，有一个线索！我的猜测是您的选择器过于包容，并且您选择了多个元素......即使在文档中的另一个选择列表中。
You may provide a little more HTML code for your example, but let me show how I would do it...
您可以为您的示例提供更多的 HTML 代码，但让我展示我将如何做...
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
JS
$('#MyNiceList option[value="my_option_2"]').insertBefore('#MyNiceList option[value="my_option_1"]');
If you pay attention on the selector that I used, I eliminate any possibility of select more than one element, so, the rule on the second part I quoted is obeyed.
如果你注意我使用的选择器，我消除了选择多个元素的任何可能性，所以，我引用的第二部分的规则被遵守。
Example:
例子：
I hope I helped you on my first Answer! : )
我希望我的第一个答案能帮助你！:)
回答by Asped
There may be 2 problems
可能有2个问题
If you insert a new option, then you simply may have 2 options with the same values, as you did not remove it.
The first item is numbered "0" not "1"
如果您插入一个新选项，那么您可能只有 2 个具有相同值的选项，因为您没有删除它。
第一项编号为“0”而不是“1”
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);
回答by Doug
:eq(1) will select the second element rather than the first element. Other than that, the code you've posted should work fine:
:eq(1) 将选择第二个元素而不是第一个元素。除此之外，您发布的代码应该可以正常工作：
var $select = $("#mySelect");
$mySelect.find('option[value="car"]')
.insertBefore($mySelect.find('option:eq(1)'));
回答by JpBaena13
try this
试试这个
$("select[name=list]").find('option[value="car"]').prependTo($("select[name=list]"));
$("select[name=list]").val('car')
