# html select – Get selected value in dropdown list using JavaScript

## The Question :

1917 people think this question is useful

How do I get the selected value from a dropdown list using JavaScript?

I tried the methods below, but they all return the selected index instead of the value:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

The Question Comments :

## The Answer 1

3120 people think this answer is useful

If you have a select element that looks like this:

<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>



Running this code:

var e = document.getElementById("ddlViewBy");
var strUser = e.value;



Would make strUser be 2. If what you actually want is test2, then do this:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;



Which would make strUser be test2

## The Answer 2

395 people think this answer is useful

Plain JavaScript:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;



jQuery:

$("#elementId :selected").text(); // The text content of the selected option$("#elementId :selected").val(); // The value of the selected option


// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript



## The Answer 13

7 people think this answer is useful

Another solution is:

document.getElementById('elementId').selectedOptions[0].value



## The Answer 14

6 people think this answer is useful

Running example of how it works:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3"  selected="selected">test3</option>
</select>


Note: The values don’t change as the dropdown is changed, if you require that functionality then an onClick change is to be implemented.

## The Answer 15

5 people think this answer is useful

You can use querySelector.

E.g.

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;



## The Answer 16

5 people think this answer is useful

I have a bit different view of how to achieve this. I’m usually doing this with the following approach (it is an easier way and works with every browser as far as I know):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>



## The Answer 17

5 people think this answer is useful

To go along with the previous answers, this is how I do it as a one-liner. This is for getting the actual text of the selected option. There are good examples for getting the index number already. (And for the text, I just wanted to show this way)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text



In some rare instances you may need to use parentheses, but this would be very rare.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;



I doubt this processes any faster than the two line version. I simply like to consolidate my code as much as possible.

Unfortunately this still fetches the element twice, which is not ideal. A method that only grabs the element once would be more useful, but I have not figured that out yet, in regards to doing this with one line of code.

## The Answer 18

5 people think this answer is useful

The simplest way to do this is:

var value = document.getElementById("selectId").value;



## The Answer 19

4 people think this answer is useful

In 2015, in Firefox, the following also works.

e.options.selectedIndex

## The Answer 20

3 people think this answer is useful

Here is a JavaScript code line:

var x = document.form1.list.value;



Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

## The Answer 21

2 people think this answer is useful

You should be using querySelector to achieve this. This also standardize the way of getting value from form elements.

var dropDownValue = document.querySelector('#ddlViewBy').value;

## The Answer 22

2 people think this answer is useful

In more modern browsers, querySelector allows us to retrieve the selected option in one statement, using the :checked pseudo-class. From the selected option, we can gather whatever information we need:

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");

<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>


## The Answer 23

1 people think this answer is useful

I don’t know if I’m the one that doesn’t get the question right, but this just worked for me: Using an onchange() event in your html, eg.

<select id="numberToSelect" onchange="selectNum">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>



//javascript

function sele(){
var strUser = numberToSelect.value;
}



This will give you whatever value is on the select dropdown per click

## The Answer 24

1 people think this answer is useful

I think you can attach an event listener to the select tag itself e.g:

<script>
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>



In this scenario, you should make sure you have a value attribute for all of your options, and they are not null.

## The Answer 25

0 people think this answer is useful

Here’s an easy way to do it in an onchange function:

event.target.options[event.target.selectedIndex].dataset.name

## The Answer 26

0 people think this answer is useful

Just do: document.getElementById('idselect').options.selectedIndex

Then you i’ll get select index value, starting in 0.

## The Answer 27

0 people think this answer is useful

Try

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label



console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
<option value="1">Happy</option>
<option value="2">Tree</option>
<option value="3"  selected="selected">Friends</option>
</select>


## The Answer 28

0 people think this answer is useful

Make a drop-down menu with several options (As many as you want!)

<select>
<option value="giveItAName">Give it a name
<option value="bananaShark">Ridiculous animal
<ooption value="Unknown">Give more options!
</select>



I made a bit hilarious. Here’s the code snippet:

<select>
<option value="RidiculousObject">Banana Shark
<option value="SuperDuperCoding">select tag and option tag!
<option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
<option value="Single">Single Option
</select>


yay the snippet worked