将所选选项移动到下拉菜单的顶部

Question

脚本

var tkopt = {"c":"C","cs":"C#","d":"D","ef": "Eb","e":"E","f":"F","fs":"F#","g":"G","af":"Ab","a":"A","bf":"Bb","b":"B"};  
 $(document).ready(function(){     
   var sel = $("#tlist");
   $.each(tkopt, function(index, value){
     $("<option/>",{ value : index, text : value}).appendTo(sel);
   });
   $(function() {
     $("#tlist").val('e');
   });
 });

<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

</head>
<body>
<select id="tlist">
</select>
</body>
</html>

此处提供的选项只是音乐根音键。在这里，我将选项 E 作为选择选项。现在我需要将 E 以上的选项附加到选项列表的末尾。即选项 C 应该在 B 之后，然后是 C#，依此类推，直到选项 Eb 之后是选项 D。请帮助我 jquery 代码。

Answer 1

您可以使用

$(this).find("option:selected").index()

获取当前选中选项的索引，然后一步一步将其之前的所有移动到末尾：

sel.find("option").filter((i, e) => $(e).index() < idx).appendTo(sel);

更新的代码段：

var tkopt = {"c":"C","cs":"C#","d":"D","ef": "Eb","e":"E","f":"F","fs":"F#","g":"G","af":"Ab","a":"A","bf":"Bb","b":"B"};

$(document).ready(function() {
  var sel = $("#tlist");
  $.each(tkopt, function(index, value) {
    $("<option/>", {
      value: index,
      text: value
    }).appendTo(sel);
  });

  sel.change(function() {
    var idx = $(this).find("option:selected").index();
    sel.find("option").filter((i, e) => $(e).index() < idx).appendTo(sel);
  });

  $("#tlist").val('e').change();
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<select id="tlist"> </select>

Answer 2

您可以使用 :selected 选择器和 prevAll() 来获取所选集合之前的集合，然后在更改事件处理程序中通过简单的一行操作附加整个集合

var tkopt = {"c":"C","cs":"C#","d":"D","ef": "Eb","e":"E","f":"F","fs":"F#","g":"G","af":"Ab","a":"A","bf":"Bb","b":"B"};

var sel = $("#tlist");

$.each(tkopt, (k, v) => sel.append(new Option(v, k)));

sel.change(() => sel.find(":selected").prevAll().appendTo(sel));
// trigger initial change on page load after setting default value
sel.val('e').change();

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<select id="tlist"> </select>

将所选选项移动到下拉菜单的顶部

Move selected option at top of drop down menu

html

jquery

drop-down-menu

dropdown