How to select a value in a select dropdown with JavaScript?

Question

i have a drop down like this

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected="">Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

I use this line to select a value it works in Mozilla not in IE? Why its not working?

var element = document.getElementById("Mobility");
element.value = "10";

How to do if there is no element ID? I have the name of element. — Ripon Al Wasim, Aug 04 '17 at 12:10
@RiponAlWasim you can use document.getElementsByName var element = document.getElementsByName("Mobility")[0]; — karthick, Aug 04 '17 at 16:42

score 131 · Accepted Answer · edited Feb 22 '23 at 12:20

131

Use the selectedIndex property:

document.getElementById("Mobility").selectedIndex = 12; //Option 10

Alternate method:

Loop through each value:

//Get select object
var objSelect = document.getElementById("Mobility");

//Set selected
setSelectedValue(objSelect, "10");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

edited Feb 22 '23 at 12:20

djvg

11,722
5
72
103

answered Nov 15 '11 at 18:00

James Hill

60,353
20
145
161

is there anyway without using selectedIndex? – karthick Nov 15 '11 at 18:03
1

How to do if I have the name of element instead of ID? – Ripon Al Wasim Aug 04 '17 at 12:11

score 36 · Answer 2 · answered Mar 08 '17 at 21:55

36

easiest way is to just use this

document.getElementById("mySelect").value = "banana";

myselect is name of your dropdown banana is just one of items in your dropdown list

answered Mar 08 '17 at 21:55

Amin

471
4
5

score 15 · Answer 3 · answered Nov 15 '11 at 18:03

15

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

Where s is the dropdown and v is the value

answered Nov 15 '11 at 18:03

GregM

2,634
3
22
37

@GregM, based on the HTML in the OP this won't work. `s.options[i].value` should be `s.options[i].text`. – James Hill Nov 15 '11 at 18:13
@GregM, The OP doesn't specify a value for the options, only text. – James Hill Nov 15 '11 at 18:28
Ok yeah your right :(, will let my answer there in case he puts some value ;) – GregM Nov 15 '11 at 18:33
it works in case he specify value in the options like `` – Mehdi Karamosly Sep 30 '13 at 17:31

score 12 · Answer 4 · answered Jan 13 '16 at 17:13

12

The simplest possible solution if you know the value

document.querySelector('option[value=" + value +"]').selected = true

answered Jan 13 '16 at 17:13

Gabor

121
1
2

score 7 · Answer 5 · edited May 23 '17 at 12:26

I realize that this is an old question, but I'll post the solution for my use case, in case others run into the same situation I did when implementing James Hill's answer (above).

I found this question while trying to solve the same issue. James' answer got me 90% there. However, for my use case, selecting the item from the dropdown also triggered an action on the page from dropdown's onchange event. James' code as written did not trigger this event (at least in Firefox, which I was testing in). As a result, I made the following minor change:

function setSelectedValue(object, value) {
    for (var i = 0; i < object.options.length; i++) {
        if (object.options[i].text === value) {
            object.options[i].selected = true;
            object.onchange();
            return;
        }
    }

    // Throw exception if option `value` not found.
    var tag = object.nodeName;
    var str = "Option '" + value + "' not found";

    if (object.id != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@id='" + object.id + "']."
    }

    else if (object.name != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@name='" + object.name + "']."
    }

    else {
        str += "."
    }

    throw str;
}

Note the object.onchange() call, which I added to the original solution. This calls the handler to make certain that the action on the page occurs.

Edit

Added code to throw an exception if option value is not found; this is needed for my use case.

score 6 · Answer 6 · edited Apr 29 '19 at 04:10

6

Using Javascript:

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

Using Jquery:

$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list

edited Apr 29 '19 at 04:10

Makyen

31,849
12
86
121

answered May 25 '16 at 12:27

1

Where did 'Seven' come from? – Agnel Vishal Aug 14 '19 at 17:03

score 6 · Answer 7 · edited Apr 13 '21 at 17:09

6

Using some ES6:

Get the options first, filter the value based on the option and set the selected attribute to true.

window.onload = () => {

  [...document.querySelector(`#Mobility`).options]
    .filter(x => x.value === "12")[0]
    .setAttribute('selected', true);

};

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected disabled>Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

edited Apr 13 '21 at 17:09

OzzyCzech

9,713
3
50
34

answered Jan 03 '19 at 11:49

Kunal Mukherjee

5,775
3
25
53

1

Note that in Typescript it actually needs to be `.setAttribute('selected', '');`, as the boolean type is not allowed here. This results correctly in ` – luckydonald Jul 14 '22 at 07:25

score 4 · Answer 8 · edited May 23 '17 at 12:02

4

This may do it

document.forms['someform'].elements['someelement'].value

edited May 23 '17 at 12:02

Community

1
1

answered Nov 15 '11 at 18:00

Dylan Valade

5,565
6
42
56

I definitely prefer James Hill's approach to this one but it still might be useful for someone – Dylan Valade Nov 15 '11 at 18:02

Alain Paquette · Answer 9 · 2016-07-15T13:48:11.060

Instead of doing

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

I solved this problem by doing this

function setSelectedValue(dropDownList, valueToSet) {
    var option = dropDownList.firstChild;
    for (var i = 0; i < dropDownList.length; i++) {
        if (option.text.trim().toLowerCase() == valueToSet.trim().toLowerCase()) {
            option.selected = true;
            return;
        }
        option = option.nextElementSibling;
    }
}

If you work with strings, you should use the .trim() method, sometimes blank spaces can cause trouble and they are hard to detect in javascript debugging sessions.

dropDownList.firstChild will actually be your first option tag. Then, by doing option.nextElementSibling you can go to the next option tag, so the next choice in your dropdownlist element. If you want to get the number of option tags you can use dropDownList.length which I used in the for loop.

Hope this helps someone.

James Jithin · Answer 10 · 2013-10-25T05:26:56.393

1

Yes. As mentioned in the posts, value property is nonstandard and does not work with IE. You will need to use the selectedIndex property to achieve this. You can refer to the w3schools DOM reference to see the properties of HTML elements. The following link will give you the list of properties you can work with on the select element.

http://www.w3schools.com/jsref/dom_obj_select.asp

Update

This was not supported during 2011 on IE. As commented by finnTheHuman, it is supported at present.

edited Oct 25 '13 at 05:26

answered Nov 15 '11 at 18:09

James Jithin

10,183
5
36
51

1

and please take note of the date. This comment is written on 2011. I just tried .value on IE8 and it works fine. just an FYI. :) – finnTheHumin Oct 25 '13 at 04:21

score 0 · Answer 11 · answered Sep 07 '22 at 22:13

I made two significant improvements to the excellent alternative method, which was much better suited to my requirements, that was included in the accepted answer by @Janes Hill.

As written, the code in his answer matches against the display text of the combo box. I needed to match against the string specified in the value attribute of the option tag.
To allow for the possibility that the input value is missing from the list, I wanted to return the selectedIndex so that it can be tested, returning an invalid index when that happens.
As a matter of practice, I usually make all such evaluations case insensitive.

My improved function follows.

    function SetSelectedValue ( selectObj, valueToSet )
    {
        const value2SetLC = valueToSet.toLowerCase();

        for ( var i = 0; i < selectObj.options.length; i++ )
        {
            if ( selectObj.options [ i ].value.toLowerCase ( ) === value2SetLC )
            {
                selectObj.options [ i ].selected = true;
                return i;
            }   // if ( selectObj.options [ i ].value.toLowerCase ( ) === value2SetLC )
        }   // for ( var i = 0; i < selectObj.options.length; i++ )

        return -1;  // Value not found
    }   // function SetSelectedValue

How to select a value in a select dropdown with JavaScript?

11 Answers11

Edit

Linked

Related