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)

score 0 · Answer 1 · answered Mar 16 '19 at 11:37

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

score 0 · Answer 2 · answered Mar 16 '19 at 11:40

0

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);

answered Mar 16 '19 at 11:40

GrafiCode

3,307
3
26
31

score 0 · Accepted Answer · answered Mar 16 '19 at 11:45

0

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>

answered Mar 16 '19 at 11:45

mooga

3,136
4
23
38

ya but this part of the code> options.sort(function(a,b){ if (b.name < a.name){ return 1 } return -1 }I used value instead of name while sorting, and your code really solves the problem. And one more question was is there any way to get the text of the option directly from value given to it in option tag? Is there something like getElementByValue.....so that I can use it as getElementByValue("3"),and it gives me Orange as result. – Mahesh HN Mar 16 '19 at 17:10
all what you can do is to get the `selectedIndex` see https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex – mooga Mar 16 '19 at 20:44
My question is concerned with retrieving some other element which is not currently selected. If it is the selected index yes it is easy to retrieve the text. I want to get the text of some particular option with some unique value given to it in its tag. Using that value is it possible to get the text? – Mahesh HN Mar 17 '19 at 01:06

score 0 · Answer 4 · answered Mar 16 '19 at 12:02

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>

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

4 Answers4