How to get N options from the <select> element using JQuery?
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 = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color: green" > w3wiki </ 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 = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color: green" > w3wiki </ 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: