Can we retrieve the default selected value of dropdown bar using javascript's document.getElementById method?

Question

I want to get the default value of the dropdown bar using javascript.

In the code below

alert(document.getElementById("dropdown").selected)

<select id="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

the audi option is by default selected value of the drop-down bar. with help of document.getElementById("drop-down").value="" we can get the value the user has selected(say it is Saab) but I want to get the default value of that particular drop-down bar(i.e audi)

I tried using document.getElementById("selement").selected but it doesn't seem to be working

I want to get the default regardless of what the user selects. I have two tabs. the first tab has this drop down. When the user moves onto the next tab the drop-down in the first tab should display the default value (such as "select any options below" or in the case of the example , "audi") but for me the drop-down shows the one which the user had selected previously before the tab was changed. So is there a way where I can get the value 'audi' through JS ?

Possible duplicate of [How to get selected value from Dropdown list in JavaScript](https://stackoverflow.com/questions/8832375/how-to-get-selected-value-from-dropdown-list-in-javascript) — Krishna Prashatt, May 17 '19 at 06:00
@KrishnaPrashatt .value returns the value which the user selects. If the user selects Saab and if I use .value it returns the 'Saab' but I want to get the value 'audi' even if the user doesn't select that ! — Obito Uchiha, May 17 '19 at 06:01
It returns the `selected` value.Yes if the user selects `saab` then selected attribute will be for `saab`.If you need to get the default value then get the value as soon as the `DOM` gets loaded before user changes the vallue. — Krishna Prashatt, May 17 '19 at 06:04
@ObitoUchiha do you control the HTML? And I assume you want to get the `default` regardless of what the user selected? — Bibberty, May 17 '19 at 06:10
@Bibberty yes, I want to get the default regardless of what the user selects. My problem is I have two tabs. the first tab has this drop down. When the user moves onto the next tab the drop-down in the first tab should display the default value (such as "select any options below" or in the case of the example , "audi") but for me the drop-down shows the one which the user had selected previously before the tab was changed. — Obito Uchiha, May 17 '19 at 06:13
@ObitoUchiha I added some sample code. But if you have control of the HTML. I would like to suggest different, let me add a further snippet. — Bibberty, May 17 '19 at 06:17
@Bibberty yes I have control of the HTML and Thanks , I will be trying out your solutions . ! — Obito Uchiha, May 17 '19 at 06:26

Bibberty · Answer 1 · 2019-05-17T06:22:51.740

In this example we grab the default at DOMContentLoaded and store it.

let defaultValue;

document.addEventListener('DOMContentLoaded', () => {
  defaultValue = document.querySelector('#selement').value;
});

document.addEventListener('change', (e) => {
  if(e.target.matches('#selement')) {
    console.log(`Default: ${defaultValue} - Selected: ${e.target.value}`);
  }
});

<select id="selement">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

Assuming complete control of the HTML:

Note: we add a data tag.

document.addEventListener('change', (e) => {
  if(e.target.matches('#selement')) {
    let defaultValue = e.target.querySelector('option[data-default="true"]').value;
    console.log(`Default: ${defaultValue} - Selected: ${e.target.value}`);
  }
});

<select id="selement">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" data-default="true" selected>Audi</option>
</select>

Again assuming HTML control, but a slight adaption of the data option.

document.addEventListener('change', (e) => {
  if(e.target.matches('#selement')) {
    console.log(`Default: ${e.target.dataset.default} - Selected: ${e.target.value}`);
  }
});

<select id="selement" data-default="audi">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

Can you post code in Repl.it or sandbox.io ? We can look there. — Bibberty, May 17 '19 at 17:46

score 0 · Answer 2 · answered May 17 '19 at 06:01

Just use value:

console.log(document.getElementById("selement").value);

<select id="selement">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

score 0 · Answer 3 · answered May 17 '19 at 06:26

You can test if an option element is selected using .select, so you could loop through all options and get the value of the one which is selected, like that:

function getSelectedValue(dropDownId) {

    var options = document.getElementById(dropDownId).children;

    for (option of options) {
        if (option.selected) {
            return option.value;
        }
    }
}

Where dropDownId is the id of your select element.

But since the selected option will be changed by the user, you could store the value of the default selected option in a variable as soon as the page loads your script, with for example a simple global variable like var defaultValue = getSelectedValue("my-drop-down");

Can we retrieve the default selected value of dropdown bar using javascript's document.getElementById method?

3 Answers3