The task is to get the random N options from the select element. Below are few of the approaches:
Approach 1:
- First get the all option element’s text in the array.
- Generate a random index of the array and get the option of that index.
- Swap the last element with the current random index and subtract the length of array by 1.
- Repeat the process until n options are obtained.
Example 1: This example uses the approach discussed above.
<!DOCTYPE HTML> < html >
< head >
< title >
How to get N options from the < select > element.
</ title >
< script src =
</ 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 >
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
Approach 2:
- Sort the options by defining their priorities by generating random numbers.
- Use .slice() method to get the first N options.
Example 2: This example uses the approach discussed above.
<!DOCTYPE HTML> < html >
< head >
< title >
How to get N options from the < select > element.
</ title >
< script src =
</ 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 >
|
Output:
-
Before clicking on the button:
-
After clicking on the button: