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