Get selected value of dropdown

Question

I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:

<div class="quantityDropdown quantityDropdown-cartItem">
    <select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
            data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
        <option value="1">1</option>
        <option value="2" selected="">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

My code returns null.

I want to get 2 as my value. As you can see, there's no value in the selected attribute.

var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");

How do I get the value 2 that's outside the option tag?

Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Dave, Oct 07 '16 at 14:34

score 4 · Answer 1 · answered Oct 07 '16 at 14:53

4

You should get the option tag, like this:

var quantity = document.querySelector(".quantityDropdown select option:checked");

You could use checked also for checkbox and radio.

answered Oct 07 '16 at 14:53

Alessandro

4,382
8
36
70

score 3 · Accepted Answer · answered Oct 07 '16 at 14:38

3

This will give you the value of the selected item:

quantity = document.querySelector(".quantityDropdown select").value;

However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:

var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;

answered Oct 07 '16 at 14:38

ITFlyer

172
1
2

Simply using :checked does the trick for the currently selected option, then use .textContent to get its text content – Ali Nasserzadeh Jan 07 '20 at 12:36

score 2 · Answer 3 · answered Oct 07 '16 at 14:39

To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.

const dropdown = document.querySelector('.cart-quantity-picker')

console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)

<div class="quantityDropdown quantityDropdown-cartItem">
  <select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
    <option value="1">1</option>
    <option value="2" selected>2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>

score 1 · Answer 4 · answered Oct 07 '16 at 14:38

1

Use document.querySelector(".quantityDropdown select").selectedIndex

answered Oct 07 '16 at 14:38

Stormhashe

704
6
16

score 1 · Answer 5 · answered Oct 07 '16 at 14:40

in case you need the get the 'value' :

var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;

But if you want to get the text ΝΟΤ the value , you do:

 var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
    var selText = dropdown.options[dropdown.selectedIndex].text;

Razia sultana · Answer 6 · 2016-10-17T15:35:37.570

1

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

edited Oct 17 '16 at 15:35

answered Oct 07 '16 at 14:45

Razia sultana

2,168
3
15
20

score 1 · Answer 7 · answered Aug 28 '19 at 02:12

1

For getting the value you can use

document.querySelector('#qtySelect option:checked').value;

For getting the actual text inside the option you can use

document.querySelector('#qtySelect option:checked').text;

answered Aug 28 '19 at 02:12

Zoren Konte

306
4
12

Get selected value of dropdown

7 Answers7