How do I programatically select an HTML option using JavaScript?

Question

I have option menu like this:

<form name="AddAndEdit">
   <select name="list" id="personlist">
      <option value="11">Person1</option>
      <option value="27">Person2</option>
      <option value="17">Person3</option>
      <option value="10">Person4</option>
      <option value="7">Person5</option>
      <option value="32">Person6</option>
      <option value="18">Person7</option>
      <option value="29">Person8</option>
      <option value="28">Person9</option>
      <option value="34">Person10</option>
      <option value="12">Person11</option>
      <option value="19">Person12</option>
   </select>
</form>

And now I want to change the selected option by using an href. For example:

<a href="javascript:void(0);"
  onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>

But I want to select the option with value=11 (Person1), not Person12.

How do I change this code?

score 322 · Accepted Answer · edited Dec 27 '17 at 15:10

322

Change

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

to

document.getElementById('personlist').value=Person_ID;

edited Dec 27 '17 at 15:10

Peter Mortensen

30,738
21
105
131

answered Jun 06 '12 at 09:38

breq

24,412
26
65
106

3

how does this work with multiple values? For example: `document.getElementById('personlist').value=id1,id2` will not work, how to manage that? – utdev Mar 17 '17 at 11:30
6

@utdev here is a solution for multiple selecting http://stackoverflow.com/a/1296068/1251563 tip: you need to use a loop – breq Mar 17 '17 at 11:44
So I can't do something like `.value = id1, id2` or `.value = [array]` ? – utdev Mar 17 '17 at 11:50
@utdev unfortunately no... You need to use a loop – breq Mar 17 '17 at 11:53
Also you can get value through select options without setting the class like `var id = document.getElementById('personlist').value`. I used in different answer, thanks anyway! – Alper Feb 06 '19 at 08:52
Warning: If your select box have options that aren't empty but the value in JS is empty, to set it with `.value = '';` will make your select box empty which is not exists. – vee Mar 11 '23 at 08:04

Nono · Answer 2 · 2019-10-13T10:26:34.340

Tools as pure JavaScript code for handling Selectbox:

Graphical Understanding:

Image - A

Image - B

Image - C

Updated - 25-June-2019 | Fiddler DEMO

JavaScript Code:

/**
 * Empty Select Box
 * @param eid Element ID
 * @param value text
 * @param text text
 * @author Neeraj.Singh
 */
function emptySelectBoxById(eid, value, text) {
    document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>";
}


/**
 * Reset Select Box
 * @param eid Element ID
 */

function resetSelectBoxById(eid) {
    document.getElementById(eid).options[0].selected = 'selected';
}


/**
 * Set Select Box Selection By Index
 * @param eid Element ID
 * @param eindx Element Index
 */

function setSelectBoxByIndex(eid, eindx) {
    document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected';
    //or
    document.getElementById(eid).options[eindx].selected = 'selected';
}


/**
 * Set Select Box Selection By Value
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByValue(eid, eval) {
    document.getElementById(eid).value = eval;
}


/**
 * Set Select Box Selection By Text
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByText(eid, etxt) {
    var eid = document.getElementById(eid);
    for (var i = 0; i < eid.options.length; ++i) {
        if (eid.options[i].text === etxt)
            eid.options[i].selected = true;
    }
}


/**
 * Get Select Box Text By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxText(eid) {
    return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text;
}


/**
 * Get Select Box Value By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxValue(id) {
    return document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
}

Great example on how to interact with a select with pure javascript! — Mr.GT, Mar 26 '14 at 13:49
Link to "Fiddler Demo" now results in 404/Page Not Found :-( — Genki, Aug 11 '18 at 04:47
The question is "How do I change an HTML selected option using JavaScript?". You just copy/paste a piece of code without answering nothing. — El pupi, Jun 22 '19 at 17:43

score 53 · Answer 3 · edited Jun 02 '19 at 04:41

53

mySelect.value = myValue;

Where mySelect is your selection box, and myValue is the value you want to change it to.

edited Jun 02 '19 at 04:41

Toastrackenigma

7,604
4
45
55

answered Feb 01 '17 at 00:12

Ronnie Royston

16,778
6
77
91

1

Why didn't everyone vote this, is this a new feature? I only need to support recent browsers though so going with this anyhow. – antont Nov 14 '18 at 11:17
1

I always had the notion that you couldn't do this, so I just kinda ignored it. But when I saw this answer, I tried it, and lo and behold, it works just like inputs. This has to be the right answer. +1 – Jaden Baptista Mar 22 '21 at 20:52
`document.getElementById("mySelect").value = "myValue"` worked for me – leanne Mar 10 '23 at 19:31
Amazing post, I didn't realise the solution was so simple. – Joachim May 24 '23 at 09:40

score 32 · Answer 4 · edited Dec 27 '17 at 15:12

I believe that the blog post JavaScript Beginners – Select a dropdown option by value might help you.

<a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a>

function selectItemByValue(elmnt, value){

  for(var i=0; i < elmnt.options.length; i++)
  {
    if(elmnt.options[i].value === value) {
      elmnt.selectedIndex = i;
      break;
    }
  }
}

score 30 · Answer 5 · answered Aug 19 '16 at 08:43

You could also change select.options.selectedIndex DOM attribute like this:

function selectOption(index){ 
  document.getElementById("select_id").options.selectedIndex = index;
}

<p>
<select id="select_id">
  <option selected>first option</option>
  <option>second option</option>
  <option>third option</option>
</select>
</p>
<p>
  <button onclick="selectOption(0);">Select first option</button>
  <button onclick="selectOption(1);">Select second option</button>
  <button onclick="selectOption(2);">Select third option</button>
</p>

What are you using for `index`? An integer between 0 and 2? – d-b Jul 28 '23 at 14:24 — d-b, Jul 28 '23 at 14:24

score 6 · Answer 6 · answered Jun 21 '19 at 19:28

6

If you are adding the option with javascript

function AddNewOption(userRoutes, text, id) 
{
    var option = document.createElement("option");
    option.text = text;
    option.value = id;
    option.selected = "selected";
    userdRoutes.add(option);
}

answered Jun 21 '19 at 19:28

Frank M

89
1
4

3

I think the question was “How do I change an HTML selected option using JavaScript?” – Manngo Mar 26 '20 at 09:23

score 5 · Answer 7 · edited Oct 21 '18 at 16:31

5

You can use JQuery also

$(document).ready(function () {
  $('#personlist').val("10");
}

edited Oct 21 '18 at 16:31

Hossein Golshani

1,847
5
16
27

answered Oct 21 '18 at 16:24

sunil yaduvanshi

468
6
9

8

Or, without query, saving a whole bunch of unnecessary overhead, `document.querySelector('#personlist').value=10;` . – Manngo Mar 26 '20 at 09:25
2

This question is NOT about JQuery. – gouessej Oct 15 '21 at 08:12

score 4 · Answer 8 · answered Jul 25 '20 at 18:48

Your own answer technically wasn't incorrect, but you got the index wrong since indexes start at 0, not 1. That's why you got the wrong selection.

document.getElementById('personlist').getElementsByTagName('option')[**10**].selected = 'selected';

Also, your answer is actually a good one for cases where the tags aren't entirely English or numeric.

If they use, for example, Asian characters, the other solutions telling you to use .value() may not always function and will just not do anything. Selecting by tag is a good way to ignore the actual text and select by the element itself.

score 2 · Answer 9 · edited Dec 27 '17 at 15:10

2

An array Index will start from 0. If you want value=11 (Person1), you will get it with position getElementsByTagName('option')[10].selected.

edited Dec 27 '17 at 15:10

Peter Mortensen

30,738
21
105
131

answered Jun 06 '12 at 09:38

Rachana

121
1
9

score 1 · Answer 10 · answered May 14 '20 at 23:45

It's an old post, but if anyone is still looking for solution to this kind of problem, here is what I came up with:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.forms['AddAndEdit'].elements['list'].value = 11;
  });
</script>

score 0 · Answer 11 · answered Mar 09 '21 at 10:58

Note: Option Index count starts from 0. That means first option will be indexed at 0.

document.querySelector(".add__btn").addEventListener("click", function(){
  var index = 1; /*change option value here*/  document.querySelector(".add__type").options.selectedIndex = index;
  document.querySelector(".add__description").value = "Option Index";
  document.querySelector(".add__value").value = index;
});

<html>
    <div class="add__container">
         <select class="add__type">
            <option value="inc" selected>+</option>
            <option value="exp">-</option>
         </select>
         <input type="text" class="add__description" placeholder="Add description">
         <input type="number" class="add__value" placeholder="Value">
         <button class="add__btn"> Submit </button>
</div>

<h4> Default Option Value will be selected after pressing Submit </h4>

score 0 · Answer 12 · answered Jul 13 '23 at 03:07

0

Jquery solution,

$('select').prop('selectedIndex', 1);

answered Jul 13 '23 at 03:07

NIKHIL CHANDRA ROY

807
11
16

How do I programatically select an HTML option using JavaScript?

12 Answers12

Linked

Related