Javascript para ordenar los contenidos del elemento seleccionado

select html javascript selected value

Question

¿Hay una forma rápida de ordenar los elementos de un elemento seleccionado? O tengo que recurrir a escribir javascript?

Por favor, cualquier idea.

<select size="4" name="lstALL" multiple="multiple" id="lstALL" tabindex="12" style="font-size:XX-Small;height:95%;width:100%;">
<option value="0"> XXX</option>
<option value="1203">ABC</option>
<option value="1013">MMM</option>
</select>

Answer 1

Creo que esta es una mejor opción (¡uso el código de @ Matty y mejoré!):

function sortSelect(selElem, bCase) {
                var tmpAry = new Array();
                bCase = (bCase ? true : false);
                for (var i=0;i<selElem.options.length;i++) {
                        tmpAry[i] = new Array();
                        tmpAry[i][0] = selElem.options[i].text;
                        tmpAry[i][1] = selElem.options[i].value;
                }
                if (bCase)
                    tmpAry.sort(function (a, b) {
                        var ret = 0;
                        var iPos = 0;
                        while (ret == 0 && iPos < a.length && iPos < b.length)
                        {
                            ret = (String(a).toLowerCase().charCodeAt(iPos) - String(b).toLowerCase().charCodeAt(iPos));
                            iPos ++;
                        }
                        if (ret == 0)
                        {
                            ret = (String(a).length - String(b).length);
                        }
                        return ret;
                        });
                else
                    tmpAry.sort();
                while (selElem.options.length > 0) {
                    selElem.options[0] = null;
                }
                for (var i=0;i<tmpAry.length;i++) {
                        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
                        selElem.options[i] = op;
                }
                return;
        }

Answer 2

De las preguntas frecuentes del W3C :

Aunque muchos lenguajes de programación tienen dispositivos como cuadros desplegables que tienen la capacidad de ordenar una lista de elementos antes de mostrarlos como parte de su funcionalidad, la función HTML <select> no tiene tales capacidades. Enumera las <opciones> en el orden recibido.

Tendría que ordenarlos a mano para un documento HTML estático, o recurrir a Javascript u otro tipo programático para un documento dinámico.

Answer 3

Esta es una recopilación de mis 3 respuestas favoritas en este foro:

• la mejor y más simple respuesta de jOk.
• El método jQuery fácil de Terry Porter.
• Función configurable de SmokeyPHP.

Los resultados son una función fácil de usar y fácilmente configurable.

El primer argumento puede ser un objeto seleccionado, la ID de un objeto seleccionado o una matriz con al menos 2 dimensiones.

El segundo argumento es opcional. El valor predeterminado es ordenar por texto de opción, índice 0. Se puede pasar a cualquier otro índice para ordenarlo. Se puede pasar 1, o el texto "valor", para ordenar por valor.

Ordenar por ejemplos de texto (todos ordenarían por texto):

 sortSelect(''select_object_id'');
 sortSelect(''select_object_id'', 0);
 sortSelect(selectObject);
 sortSelect(selectObject, 0);

Ordenar por valor (todo se ordenaría por valor):

 sortSelect(''select_object_id'', ''value'');
 sortSelect(''select_object_id'', 1);
 sortSelect(selectObject, 1);

Ordenar cualquier matriz por otro índice:

var myArray = [
  [''ignored0'', ''ignored1'', ''Z-sortme2''],
  [''ignored0'', ''ignored1'', ''A-sortme2''],
  [''ignored0'', ''ignored1'', ''C-sortme2''],
];

sortSelect(myArray,2);

Este último ordenará la matriz por el índice-2, el sortme.

Función principal de clasificación

function sortSelect(selElem, sortVal) {

    // Checks for an object or string. Uses string as ID. 
    switch(typeof selElem) {
        case "string":
            selElem = document.getElementById(selElem);
            break;
        case "object":
            if(selElem==null) return false;
            break;
        default:
            return false;
    }

    // Builds the options list.
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }

    // allows sortVal to be optional, defaults to text.
    switch(sortVal) {
        case "value": // sort by value
            sortVal = 1;
            break;
        default: // sort by text
            sortVal = 0;
    }
    tmpAry.sort(function(a, b) {
        return a[sortVal] == b[sortVal] ? 0 : a[sortVal] < b[sortVal] ? -1 : 1;
    });

    // removes all options from the select.
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }

    // recreates all options with the new order.
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }

    return true;
}

Answer 4

Esta solución funcionó muy bien para mí al usar jquery, pensé en hacer una referencia cruzada aquí ya que encontré esta página antes que la otra. Alguien más podría hacer lo mismo.

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

de la lista desplegable Ordenar usando Javascript

Answer 5

Esto hará el truco. Simplemente document.getElementById(''lstALL'') su elemento de selección a la: document.getElementById(''lstALL'') cuando necesite ordenar su lista.

function sortSelect(selElem) {
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
    return;
}

Answer 6

Inspirado por la respuesta de @Terre Porter, creo que este es muy simple de implementar (usando jQuery)

var $options = jQuery("#my-dropdownlist-id > option"); 
// or jQuery("#my-dropdownlist-id").find("option")

$options.sort(function(a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
})

Pero, para las listas desplegables Alfa / Numérico:

Inspirado por: https://.com/a/4340339/1598891

var $options = jQuery(dropDownList).find("option");

var reAlpha = /[^a-zA-Z]/g;
var reNumeric = /[^0-9]/g;
$options.sort(function AlphaNumericSort($a,$b) {
    var a = $a.text;
    var b = $b.text;
    var aAlpha = a.replace(reAlpha, "");
    var bAlpha = b.replace(reAlpha, "");
    if(aAlpha === bAlpha) {
        var aNumeric = parseInt(a.replace(reNumeric, ""), 10);
        var bNumeric = parseInt(b.replace(reNumeric, ""), 10);
        return aNumeric === bNumeric ? 0 : aNumeric > bNumeric ? 1 : -1;
    } else {
        return aAlpha > bAlpha ? 1 : -1;
    }
})

Espero que ayude

Answer 7

No es tan bonito como el ejemplo de JQuery de Marco pero con el prototipo (me puede faltar una solución más elegante) sería:

function sort_select(select) {
  var options = $A(select.options).sortBy(function(o) { return o.innerHTML });
  select.innerHTML = "";
  options.each(function(o) { select.insert(o); } );
}

Y luego solo pásalo un elemento selecto:

sort_select( $(''category-select'') );

Answer 8

Otra forma de hacerlo con jQuery:

// sorting;
var selectElm = $("select"),
    selectSorted = selectElm.find("option").toArray().sort(function (a, b) {
        return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1;
    });
selectElm.empty();
$.each(selectSorted, function (key, value) {
    selectElm.append(value);
});

Answer 9

Otra opción:

function sortSelect(elem) {
    var tmpAry = [];
    // Retain selected value before sorting
    var selectedValue = elem[elem.selectedIndex].value;
    // Grab all existing entries
    for (var i=0;i<elem.options.length;i++) tmpAry.push(elem.options[i]);
    // Sort array by text attribute
    tmpAry.sort(function(a,b){ return (a.text < b.text)?-1:1; });
    // Wipe out existing elements
    while (elem.options.length > 0) elem.options[0] = null;
    // Restore sorted elements
    var newSelectedIndex = 0;
    for (var i=0;i<tmpAry.length;i++) {
        elem.options[i] = tmpAry[i];
        if(elem.options[i].value == selectedValue) newSelectedIndex = i;
    }
    elem.selectedIndex = newSelectedIndex; // Set new selected index after sorting
    return;
}

Answer 10

Pruebe esto ... con suerte le ofrecerá una solución:

function sortlist_name()
{

    var lb = document.getElementById(''mylist'');
    arrTexts = new Array();
    newTexts = new Array();
    txt = new Array();
    newArray =new Array();
    for(i=0; i<lb.length; i++)
    {
      arrTexts[i] = lb.options[i].text;
    }
    for(i=0;i<arrTexts.length; i++)
    {
        str = arrTexts[i].split(" -> ");
        newTexts[i] = str[1]+'' -> ''+str[0];
    }
    newTexts.sort();
    for(i=0;i<newTexts.length; i++)
    {
        txt = newTexts[i].split('' -> '');
        newArray[i] = txt[1]+'' -> ''+txt[0];
    }
    for(i=0; i<lb.length; i++)
    {
        lb.options[i].text = newArray[i];
        lb.options[i].value = newArray[i];
    }
}
/***********revrse by name******/
function sortreverse_name()
{

    var lb = document.getElementById(''mylist'');
    arrTexts = new Array();
    newTexts = new Array();
    txt = new Array();
    newArray =new Array();
    for(i=0; i<lb.length; i++)
    {
      arrTexts[i] = lb.options[i].text;
    }
    for(i=0;i<arrTexts.length; i++)
    {
        str = arrTexts[i].split(" -> ");
        newTexts[i] = str[1]+'' -> ''+str[0];
    }
    newTexts.reverse();
    for(i=0;i<newTexts.length; i++)
    {
        txt = newTexts[i].split('' -> '');
        newArray[i] = txt[1]+'' -> ''+txt[0];
    }
    for(i=0; i<lb.length; i++)
    {
        lb.options[i].text = newArray[i];
        lb.options[i].value = newArray[i];
    }
}

function sortlist_id() {
var lb = document.getElementById(''mylist'');
arrTexts = new Array();

for(i=0; i<lb.length; i++)  {
  arrTexts[i] = lb.options[i].text;
}

arrTexts.sort();

for(i=0; i<lb.length; i++)  {
  lb.options[i].text = arrTexts[i];
  lb.options[i].value = arrTexts[i];
}
}

/***********revrse by id******/
function sortreverse_id() {
var lb = document.getElementById(''mylist'');
arrTexts = new Array();

for(i=0; i<lb.length; i++)  {
  arrTexts[i] = lb.options[i].text;
}

arrTexts.reverse();

for(i=0; i<lb.length; i++)  {
  lb.options[i].text = arrTexts[i];
  lb.options[i].value = arrTexts[i];
}
}
</script>



  ID<a href="javascript:sortlist_id()"> &#x25B2;  </a> <a href="javascript:sortreverse_id()">&#x25BC;</a> |  Name<a href="javascript:sortlist_name()"> &#x25B2;  </a> <a href="javascript:sortreverse_name()">&#x25BC;</a><br/>

<select name=mylist id=mylist size=8 style=''width:150px''>

<option value="bill">4 -> Bill</option>
<option value="carl">5 -> Carl</option>
<option value="Anton">1 -> Anton</option>
<option value="mike">2 -> Mike</option>
<option value="peter">3 -> Peter</option>
</select>
<br>

Answer 11

Rápidamente he agrupado uno que permite la elección de la dirección ("asc" o "desc"), si la comparación debe hacerse en el valor de la opción (verdadero o falso) y si los espacios en blanco iniciales y finales deben recortarse antes de la comparación (booleano).

El beneficio de este método es que la opción seleccionada se mantiene y todas las demás propiedades / factores desencadenantes especiales también deben conservarse.

function sortOpts(select,dir,value,trim)
{
    value = typeof value == ''boolean'' ? value : false;
    dir = [''asc'',''desc''].indexOf(dir) > -1 ? dir : ''asc'';
    trim = typeof trim == ''boolean'' ? trim : true;
    if(!select) return false;
    var opts = select.getElementsByTagName(''option'');

    var options = [];
    for(var i in opts)
    {
        if(parseInt(i)==i)
        {
            if(trim)
            {
                opts[i].innerHTML = opts[i].innerHTML.replace(/^/s*(.*)/s*$/,''$1'');
                opts[i].value = opts[i].value.replace(/^/s*(.*)/s*$/,''$1'');
            }
            options.push(opts[i]);
        }
    }
    options.sort(value ? sortOpts.sortVals : sortOpts.sortText);
    if(dir == ''desc'') options.reverse();
    options.reverse();
    for(var i in options)
    {
        select.insertBefore(options[i],select.getElementsByTagName(''option'')[0]);
    }
}
sortOpts.sortText = function(a,b) {
    return a.innerHTML > b.innerHTML ? 1 : -1;
}
sortOpts.sortVals = function(a,b) {
    return a.value > b.value ? 1 : -1;
}

Answer 12

Sí DOK tiene la respuesta correcta ... preordena los resultados antes de escribir el HTML (asumiendo que es dinámico y usted es responsable de la salida), o escribe javascript.

El método Javascript Sort será tu amigo aquí. Simplemente extraiga los valores de la lista de selección, luego ordénelos y vuelva a colocarlos :-)

Answer 13

Trabajando con las respuestas proporcionadas por Marco Lazzeri y Terre Porter (vótelas si esta respuesta es útil), se me ocurrió una solución ligeramente diferente que conserva el valor seleccionado (sin embargo, no conserva los manejadores de eventos o datos adjuntos) utilizando jQuery .

// save the selected value for sorting
var v = jQuery("#id").val();

// sort the options and select the value that was saved
j$("#id")
    .html(j$("#id option").sort(function(a,b){
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;}))
    .val(v);

Answer 14

Tuve un problema similar, excepto que quería que los elementos seleccionados aparecieran en la parte superior, y no quería borrar qué elementos se seleccionaron (lista de selección múltiple). El mío está basado en jQuery ...

function SortMultiSelect_SelectedTop(slt) {
    var options =
        $(slt).find("option").sort(function (a, b) {
            if (a.selected && !b.selected) return -1;
            if (!a.selected && b.selected) return 1;
            if (a.text < b.text) return -1;
            if (a.text > b.text) return 1;
            return 0;
        });
    $(slt).empty().append(options).scrollTop(0);
}

Sin seleccionar en la parte superior, se vería así.

function SortMultiSelect(slt) {
    var options =
        $(slt).find("option").sort(function (a, b) {
            if (a.text < b.text) return -1;
            if (a.text > b.text) return 1;
            return 0;
        });
    $(slt).empty().append(options).scrollTop(0);
}

Answer 15

Usé este tipo de burbuja porque no pude ordenarlos por el valor. En la matriz de opciones y era un número. De esta manera los ordené apropiadamente. Espero que sea útil para ti también.

function sortSelect(selElem) {
  for (var i=0; i<(selElem.options.length-1); i++)
      for (var j=i+1; j<selElem.options.length; j++)
          if (parseInt(selElem.options[j].value) < parseInt(selElem.options[i].value)) {
              var dummy = new Option(selElem.options[i].text, selElem.options[i].value);
              selElem.options[i] = new Option(selElem.options[j].text, selElem.options[j].value);
              selElem.options[j] = dummy;
          }
}

Answer 16

Yo tuve el mismo problema. Aquí está la solución jQuery que se me ocurrió:

  var options = jQuery.makeArray(optionElements).
                       sort(function(a,b) {
                         return (a.innerHTML > b.innerHTML) ? 1 : -1;
                       });
  selectElement.html(options);

Answer 17

function call() {
    var x = document.getElementById("mySelect");
    var optionVal = new Array();

    for (i = 0; i < x.length; i++) {
        optionVal.push(x.options[i].text);
    }

    for (i = x.length; i >= 0; i--) {
        x.remove(i);
    }

    optionVal.sort();

    for (var i = 0; i < optionVal.length; i++) {
        var opt = optionVal[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        x.appendChild(el);
    }
}

La idea es extraer todos los elementos de la casilla de selección en una matriz, eliminar los valores de la casilla de selección para evitar la anulación, ordenar la matriz y luego volver a colocar la matriz ordenada en el cuadro de selección

Answer 18

function sortItems(c) {
var options = c.options;
Array.prototype.sort.call(options, function (a, b) {
    var aText = a.text.toLowerCase();
    var bText = b.text.toLowerCase();
    if (aText < bText) {
        return -1;
    } else if (aText > bText) {
        return 1;
    } else {
        return 0;
    }
});
}

sortItems(document.getElementById(''lstALL''));