web-dev-qa-db-ja.com

JavaScriptを使用したドロップダウンリストの並べ替え

私はJavaScriptを使用してドロップダウンアイテムをソートしたいのですが、これを行う方法を誰かに教えてもらえますか？.

javascriptlistsortingdrop-down-menu
17
Chetan

JQueryと次のようなものを使用できます。

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

しかし、なぜ、何を達成しようとしているのかを尋ねた方がいいでしょう。

48
masto
<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>
7
altblue

あなたはこの仕事のためにjQueryのソート機能を試すことができます-

これを試す

HTMLコード-

<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

これには配列ソートも使用できます-

これを試す

 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);
 });
5
Ishan Jain

オプション値とテキストを配列に入れ、配列をソートしてから、既存のオプション要素を、ソートされた配列から構築された新しい要素で置き換えます。

3
Russ Cam

JQUERYに依存

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 })
    );
}

例：

<select id = "my-list-id">は次のようにソートされます。

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

OR

SortOptions("my-list-id");
2
Peter Moresi

プロジェクト全体のドロップダウン

$(document).ready(function () {
    $.when($('select').addClass('auto-drop-sort')).then($.fn.sortDropOptions("auto-drop-sort"))
})

/*sort all dropdown*/
$.fn.sortDropOptions = function(dropdown_class){
    var prePrepend = ".";
    if (dropdown_class.match("^.") == ".") prePrepend = "";
    var myParent = $(prePrepend + dropdown_class);
    $.each(myParent, function(index, val) {
        /*if any select tag has this class 'manual-drop-sort' this function wont work for that particular*/
        if ( ! $(val).hasClass('manual-drop-sort') ) {
            var selectedVal = $(val).val()
            $(val).html($(val).find('option').sort(
                function (a, b) {
                    if ( a.value != -1 && a.value != 0 && a.value != '' ) {
                        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 
                    }
                })
            );
            $(val).val(selectedVal)
        }else{
            /* set custom sort for individual select tag using name/id */
        }
    });
}
0
iNandi