¿Cómo ordenar los elementos de opción alfabéticamente usando jQuery?

La tarea es ordenar las opciones del elemento <select> en su lugar. Estas son algunas de las técnicas más discutidas con la ayuda de JavaScript.

Enfoque 1: primero obtenga el valor del elemento de todas las opciones. Utilice el método .remove() para eliminar opciones temporalmente del elemento <select> . Luego llame al método .sort() en los valores y ordénelos alfabéticamente. Ahora use el método .append() para agregarlos nuevamente.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Sorting options elements alphabetically using jQuery.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;" id="body">
    <h1 id="h1" style="color:green;"> 
            GeeksforGeeks 
        </h1>
    <p id="GFG_UP" style="font-size: 15px;
                          font-weight: bold;">
    </p>
    <select id="elmt">
        <option value="v1"> YEW </option>
        <option value="v4"> ZAC </option>
        <option value="v2"> ABC </option>
        <option value="v3"> DFG </option>
        <option value="v5"> MNO </option>
        <option value="v9"> STU </option>
    </select>
    <br>
    <br>
    <button onclick="gfg_Run()">
        Click Here
    </button>
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 30px; 
                            font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = 
          "Click on the button to sort the options" +
          " of the selected elements.";
  
        function gfg_Run() {
            $("#elmt").append($("#elmt option")
                              .remove().sort(function(a, b) {
                var at = $(a).text(),
                    bt = $(b).text();
                return (at > bt) ? 1 : ((at < bt) ? -1 : 0);
            }));
            el_down.innerHTML = "Select options are sorted";
        }
    </script>
</body>
  
</html>

Producción:

Enfoque 2: Primero obtenga el valor del elemento de todas las opciones y luego use el método .detach() para eliminar las opciones temporalmente del árbol DOM. Luego llame al método .sort() en los valores y ordénelos alfabéticamente. Use el método .appendTo() para agregar opciones al elemento <select> .

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Sorting options elements alphabetically using jQuery.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;" id="body">
    <h1 id="h1" style="color:green;"> 
            GeeksforGeeks 
        </h1>
    <p id="GFG_UP" style="font-size: 15px; 
                          font-weight: bold;">
    </p>
    <select id="elmt">
        <option value="v1"> YEW </option>
        <option value="v4"> ZAC </option>
        <option value="v2"> ABC </option>
        <option value="v3"> DFG </option>
        <option value="v5"> MNO </option>
        <option value="v9"> STU </option>
    </select>
    <br>
    <br>
    <button onclick="gfg_Run()">
        Click Here
    </button>
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 30px;
                            font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = 
             "Click on the button to sort the options" +
             " of the selected elements.";
  
        function gfg_Run() {
            var options = $("#elmt 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("#elmt");
            el_down.innerHTML = "Select options are sorted";
  
        }
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta