0

我正在尝试按字母顺序对选项进行排序

我的 HTML 是

<select id="myOpt">
    <option value="" selected data-default>Select Name</option>
    <option value="3">John Snow</option>
    <option value="34">Arya Stark</option>
    <option value="54">Sansa Stark</option>
    <option value="4">Hound</option>
</select>

js

var options = $("#myOpt option");                           
options.detach().sort(function(a,b) {               
    var at = $(a).text();
    var bt = $(b).text();         
    return (at > bt)?1:((at < bt)?-1:0);            
});
options.appendTo("#myOpt");

它对选项进行了正确排序，但现在它显示了最后一个选项，而不是选定的选项。我的问题是如何显示选定的选项而不是最后一个选项，它可以通过另一种客户端方法来完成吗？因为对于大列表它使页面变慢

4

4 回答 4

2

试试这个，

var options = $("#myOpt option");  
var selectedVal = '';                         
options.detach().sort(function(a,b) {               
    var at = $(a).text();
    var bt = $(b).text();   
    if($(a).attr('selected') || $(b).attr('selected')){
        selectedVal = $(a).attr('selected') ? $(a).val() : $(b).val();
        return false;    
    }
    return (at > bt)?1:((at < bt)?-1:0);            
});
options.appendTo("#myOpt");
$('#myOpt').val(selectedVal);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myOpt">
    <option value="" selected data-default>Select Name</option>
    <option value="3">John Snow</option>
    <option value="34">Arya Stark</option>
    <option value="54">Sansa Stark</option>
    <option value="4">Hound</option>
</select>

于 2019-04-23T05:27:24.400 回答
2

不要选择第一个选项进行排序。var options = $("#myOpt option:not(:eq(0))");

如果这是一个大列表，您可以使用网络工作者来避免浏览器崩溃。另外，您可以将其放在 setTimeout 中以将其推送到事件循环中

$(function() {
  var options = $("#myOpt option:not(:eq(0))");
  options.detach().sort(function(a, b) {
    var be = $(b);
    var ae = $(a);

    if (be.attr('selected')) {
      selectedVal = be.val();
      return 1;
    }
    if (ae.attr('selected')) {
      selectedVal = ae.val();
      return -1;
    }

    var at = ae.text();
    var bt = be.text();
    return (at > bt) ? 1 : ((at < bt) ? -1 : 0);
  });
  options.appendTo("#myOpt");
  $("#myOpt").val(selectedVal);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myOpt">
  <option value="" selected data-default>Select Name</option>
  <option value="3">John Snow</option>
  <option value="34">Arya Stark</option>
  <option value="54">Sansa Stark</option>
  <option value="4">Hound</option>
</select>

于 2019-04-23T05:49:54.317 回答
1 

$(function() {
  var options = $("#myOpt option");
  options.detach().sort(function(a, b) {
    var be = $(b);
    var ae = $(a);

    if (be.attr('selected')) {
      selectedVal = be.val();
      return 1;
    }
    if (ae.attr('selected')) {
      selectedVal = ae.val();
      return -1;
    }

    var at = ae.text();
    var bt = be.text();
    return (at > bt) ? 1 : ((at < bt) ? -1 : 0);
  });
  options.appendTo("#myOpt");
  $("#myOpt").val(selectedVal);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myOpt">
  <option value="" selected data-default>Select Name</option>
  <option value="3">John Snow</option>
  <option value="34">Arya Stark</option>
  <option value="54">Sansa Stark</option>
  <option value="4">Hound</option>
</select>

于 2019-04-23T05:16:30.243 回答
1

使用原生 JavaScript 进行排序实际上可能会为您提供更具可读性的代码，同时利用shift/unshiftjQuery 未实现的操作（如 ）。

发生选择问题是因为无法选择option与其选择分离的parent选项 - 因此您需要再次选择第一个选项。

document.addEventListener("DOMContentLoaded", function() {
    var options = $("#myOpt option").detach()
    options = $.makeArray(options);
    var first = options.shift();
    options.sort( (a,b) => a.text.localeCompare(b.text) );
    options.unshift(first);
    $("#myOpt").append(options);
    $("#myOpt option").eq(0).prop("selected", true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myOpt">
    <option value="" selected data-default>Select Name</option>
    <option value="3">John Snow</option>
    <option value="34">Arya Stark</option>
    <option value="54">Sansa Stark</option>
    <option value="4">Hound</option>
</select>

您可能只想简单地保留选定的元素，然后分离/排序其他元素，这最终变得相当简单：

document.addEventListener("DOMContentLoaded", function() {
    var options = $("#myOpt option").not('[value=""]').detach();
    options.sort( (a,b) => a.text.localeCompare(b.text) );
    $("#myOpt").append(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myOpt">
    <option value="" selected data-default>Select Name</option>
    <option value="3">John Snow</option>
    <option value="34">Arya Stark</option>
    <option value="54">Sansa Stark</option>
    <option value="4">Hound</option>
</select>

于 2019-04-23T05:50:06.963 回答