Dropdown-Liste sortieren mit Javascript

Question

Ich möchte die Dropdown-Elemente mit Javascript sortieren, kann mir jemand sagen, wie man das macht.

Answer 1

Sie könnten jQuery und etwas wie dies verwenden:

$("#id").html($("#id option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

Aber es ist wahrscheinlich besser zu fragen, warum und was Sie erreichen wollen.

Answer 2

<select id="foo" size="10">
  <option value="3">three</option>
  <option value="1">one</option>
  <option value="0">zero</option>
  <option value="2">two</option>
</select>
<script>
  // WARN: won't handle OPTGROUPs!
  var sel = document.getElementById('foo');
  // convert OPTIONs NodeList to an Array
  // - keep in mind that we're using the original OPTION objects
  var ary = (function(nl) {
    var a = [];
    for (var i = 0, len = nl.length; i < len; i++)
      a.push(nl.item(i));
    return a;
  })(sel.options);
  // sort OPTIONs Array
  ary.sort(function(a,b){
    // sort by "value"? (numeric comparison)
    // NOTE: please remember what ".value" means for OPTION objects
    return a.value - b.value;
    // or by "label"? (lexicographic comparison) - case sensitive
    //return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
    // or by "label"? (lexicographic comparison) - case insensitive
    //var aText = a.text.toLowerCase();
    //var bText = b.text.toLowerCase();
    //return aText < bText ? -1 : aText > bText ? 1 : 0;
  });
  // remove all OPTIONs from SELECT (don't worry, the original
  // OPTION objects are still referenced in "ary") ;-)
  for (var i = 0, len = ary.length; i < len; i++)
    sel.remove(ary[i].index);
  // (re)add re-ordered OPTIONs to SELECT
  for (var i = 0, len = ary.length; i < len; i++)
    sel.add(ary[i], null);
</script>

Answer 3

Sie können versuchen, JQuery Sortierfunktion für diese Arbeit -

Versuchen Sie dies

HTML CODE -

<select id="ddlList">
  <option value="3">Three</option>
  <option value="1">One</option>
  <option value="1">one</option>
  <option value="1">a</option>
  <option value="1">b</option>
  <option value="1">A</option>
  <option value="1">B</option>
  <option value="0">Zero</option>
  <option value="2">Two</option>
  <option value="8">Eight</option>
</select>

JQUERY CODE -

$("#ddlList").html($('#ddlList option').sort(function(x, y) {        
     return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
}));
$("#ddlList").get(0).selectedIndex = 0;
e.preventDefault();

OR

Sie können dafür auch eine Array-Sortierung verwenden -

Versuchen Sie dies

 var options = $('#ddlList option');
 var arr = options.map(function (_, o) { return { t: $(o).text(), v: o.value }; }).get();
 arr.sort(function (o1, o2) { return o1.t.toUpperCase() > o2.t.toUpperCase() ? 1 : o1.t.toUpperCase() < o2.t.toUpperCase() ? -1 : 0; });         
 options.each(function (i, o) {
     o.value = arr[i].v;
     $(o).text(arr[i].t);
 });

Answer 4

Fügen Sie die Optionswerte und den Text in ein Array ein, sortieren Sie das Array und ersetzen Sie dann die vorhandenen Optionselemente durch neue Elemente, die aus dem sortierten Array konstruiert wurden.

Answer 5

HÄNGT VON JQUERY AB

function SortOptions(id) {
    var prePrepend = "#";
    if (id.match("^#") == "#") prePrepend = "";
    $(prePrepend + id).html($(prePrepend + id + " option").sort(
        function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 })
    );
}

Beispiele:

<select id="my-list-id"> wird sortiert mit:

SortOptions("#my-list-id");

OR

SortOptions("my-list-id");