¿Cómo obtener N opciones del elemento <select> usando JQuery?

La tarea es obtener las N opciones aleatorias del elemento seleccionado. A continuación se presentan algunos de los enfoques:
Enfoque 1:

  • Primero obtenga el texto del elemento de todas las opciones en la array.
  • Genere un índice aleatorio de la array y obtenga la opción de ese índice.
  • Intercambie el último elemento con el índice aleatorio actual y reste la longitud de la array en 1.
  • Repetir el proceso hasta obtener n opciones.

Ejemplo 1: Este ejemplo utiliza el enfoque discutido anteriormente.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to get N options from the <select> element.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
    <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 get the random n "+
          "options from the < select > element.";
        var arr = [];
        $("#elmt").find('option').each(function() {
            arr.push($(this).text());
        });
  
        function getElmts(arr, n) {
            var res = new Array(n),
                len = arr.length,
                t = new Array(len);
            while (n--) {
                var x = Math.floor(Math.random() * len);
                res[n] = arr[x in t ? t[x] : x];
                t[x] = --len in t ? t[len] : len;
            }
            return res;
        }
  
        function gfg_Run() {
            el_down.innerHTML = getElmts(arr, 5);
  
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Enfoque 2:

  • Ordena las opciones definiendo sus prioridades generando números aleatorios.
  • Use el método .slice() para obtener las primeras N opciones.

Ejemplo 2: Este ejemplo utiliza el enfoque discutido anteriormente.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to get N options from the <select> element.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
    <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 style="color:green;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = 
"Click on the button to get the random n "+
          "options from the < select > element.";
        var arr = [];
        $("#elmt").find('option').each(function() {
            arr.push($(this).text());
        });
  
        function gfg_Run() {
            var n = 5;
            const shuffle = arr.sort(() => 0.5 - Math.random());
            let ans = shuffle.slice(0, n);
            el_down.innerHTML = ans;
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botó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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *