how to retrieve the text of option tag using the value given to it in the option tag using javascript?

Question

1) How to retrieve the text of the single option using the value given to it in option tag ( irrespective of which option is selected ), say I have selected Pineapple but I want to get the name of some other fruit later in the program (eg: I selected Pineapple, but later in the program I want to know what is the fruit in Option tag with value=3 ie Orange here), and I want to do it using value given to it. (say retrieving Orange from its value 3) Yes we have lot of options if it is the selected item but what if it is not the one which is currently selected?I want to do it using javascript .

2) How to retrieve all the elements using value given to it in option tag.

3) And also how to sort it using the value(in option tag) given to it and store it in an array? ( intention is not sort in alphabetical order but sort using the value given to it option tag , I should be able to store the array with the elements in the order Apple,Banana,Orange,Pineapple)

HTML STRUCTURE

<form>Select your favorite fruit:
    <select id="mySelect">
        <option value="4">Pineapple</option>
        <option value="2">Banana</option>
        <option value="3">Orange</option>
        <option value="1">Apple</option>
    </select>
</form>

(sorry for putting many questions together in a single place, am new to stackoverflow)

Answer 1

function getSelectValues(selectId){
    let option = document.getElementById(selectId);

    let valEls = option.getElementsByTagName('option');

    let values = [];

    for (var i = 0; i < valEls.length ; i++) {
        values.push(
            {
                name: valEls[i].getAttribute('name'),
                value : valEls[i].innerHTML
            }
        );
    }
    return values;
}

also to sort a select, answer has been given here: Javascript to sort contents of select element

Answer 2

You get the element by its id and process the selected option:

var sel = document.getElementById('mySelect');

var opt = sel.options[sel.selectedIndex];

console.log(opt.value);

console.log(opt.text);

Answer 3

Sp you have requested many stuff

you could just collect the UI and then later on push it to an array and do with it what ever you would like

 let optionsUI = document.getElementsByTagName("option") let options = [] for(let i=0; i < optionsUI.length ;i++){ options.push({ "name": optionsUI.item(i).textContent, "value": optionsUI.item(i).value }) } options.sort(function(a,b){ if (b.name < a.name){ return 1 } return -1 }) console.log(options)

 <form>Select your favorite fruit: <select id="mySelect"> <option value="4">Pineapple</option> <option value="2">Banana</option> <option value="3">Orange</option> <option value="1">Apple</option> </select> </form>

Answer 4

Just sort the list of options and loop over it and get all the inner text

 let a = document.getElementsByTagName('option'); var value = []; function sortList(a) { //sort the list of options for (i = 0; i < (a.length - 1); i++) { for (j = i + 1; j < (a.length); j++) { if (a[i].value > a[j].value) { a[i].parentNode.insertBefore(a[j], a[i]); } } } for (k = 0; k < a.length; k++) { value.push(a[k].innerHTML); } } sortList(a); console.log(value);

 <form>Select your favorite fruit: <select id="mySelect"> <option value="4">Pineapple</option> <option value="2">Banana</option> <option value="3">Orange</option> <option value="1">Apple</option> </select> </form>