How to change a <select> value from JavaScript

Question

I have question that seems very simple, but I just can't get it right. I have a <select> with a list of options and a default value. After the user selects an option and clicks on a button, I want the select to go back to its default value.

<select id="select">
 <option value="defaultValue">Default</option>
 <option value="Option1">Option1</option>
 <option value="Option2">Option2</option>    
</select>
<input type="button" value="CHANGE" onclick="selectFunction()" />

So lets suppose the user selects Option 1. I get that value with javascript but after that, I want the select to show again "Default".

I found that doing document.getElementById("select").value = "defaultValue" won't work.

Does anyone know how to change that value back to the default?

possible duplicate of How do I programatically set the value of a select box element using javascript? — James Montagne
– James Montagne, Commented Feb 28, 2012 at 22:43

T.J. Crowder · Accepted Answer · 2016-01-22 06:38:03Z

100

Setting .value to the value of one of the options works on all vaguely-current browsers. On very old browsers, you used to have to set the selectedIndex:

document.getElementById("select").selectedIndex = 0;

If neither that nor your original code is working, I wonder if you might be using IE and have something else on the page creating something called "select"? (Either as a name or as a global variable?) Because some versions of IE have a problem where they conflate namespaces. Try changing the select's id to "fluglehorn" and if that works, you know that's the problem.

edited Jan 22, 2016 at 6:38

answered Feb 28, 2012 at 22:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Memphis Meng Over a year ago

What if the option of index 0 is disabled?

T.J. Crowder Over a year ago

@MemphisMeng - Then adjust accordingly.

Liam O'Toole Over a year ago

@MemphisMeng @T.J. Crowder i am using this solution (thanks btw) and resetting selectedIndex to 0 with a disabled option at 0 works fine

Polyducks · Accepted Answer · 2016-05-09 11:26:28Z

14

I found that doing document.getElementById("select").value = "defaultValue" wont work.

You must be experiencing a separate bug, as this works fine in this live demo.

And here's the full working code in case you are interested:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        var selectFunction = function() {
            document.getElementById("select").value = "defaultValue";
        };
    </script>
</head>
<body>
    <select id="select">
        <option value="defaultValue">Default</option>
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>    
    </select>
    <input type="button" value="CHANGE" onclick="selectFunction()" />
</body>
</html>

edited May 9, 2016 at 11:26

Polyducks

2132 silver badges13 bronze badges

answered Feb 28, 2012 at 22:41

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

2 Comments

Fractaliste Over a year ago

Is it possible to select a value which is not into the options?

Shiva Komuravelly Over a year ago

It might work in chrome, firefox but i am not able to get the selected value in the drop down in some versions of IE. tried to test in IE9 and IE 11 and ended up with the same problem.

sdooo · Accepted Answer · 2015-07-22 12:54:28Z

13

$('#select').val('defaultValue'); 
$('#select').change();

This will also trigger events hooked to this select

answered Jul 22, 2015 at 12:54

sdooo

1,88113 silver badges20 bronze badges

1 Comment

sdooo Over a year ago

Or $('#select').trigger('change');

Shiplu Mokaddim · Accepted Answer · 2012-02-28 22:41:17Z

7

document.getElementById("select").selectedIndex = 0 will work

answered Feb 28, 2012 at 22:41

Shiplu Mokaddim

57.8k20 gold badges147 silver badges193 bronze badges

3 Comments

mauguerra Over a year ago

I want the SELECT to display again the default value. I did that, and the display does not show the default value again

Shiplu Mokaddim Over a year ago

It'will if the default option is at index 0. It its in other index use that index. See jsfiddle.net/gN3ke/2 here I have used Option2 as default. And set selectedIndex to 2

ADH - THE TECHIE GUY Over a year ago

sorry it's not working in 2019 || can you provide any working example?

darren102 · Accepted Answer · 2012-02-28 22:46:33Z

6

Once you have done your processing in the selectFunction() you could do the following

document.getElementById('select').selectedIndex = 0;
document.getElementById('select').value = 'Default';

answered Feb 28, 2012 at 22:46

darren102

2,8281 gold badge23 silver badges24 bronze badges

Comments

filype · Accepted Answer · 2012-02-28 22:43:33Z

3

If you would like it to go back to first option try this:

   document.getElementById("select").selectedIndex = 0;

answered Feb 28, 2012 at 22:43

filype

8,47010 gold badges46 silver badges70 bronze badges

Comments

Jordan Edwards · Accepted Answer · 2013-09-27 19:22:39Z

3

I think I know what the problem is here - if you are trying to have it select an option that doesn't exist, it won't work. You need to ADD the option first. Like so:

var option=document.createElement("option");
option.text=document.getElementById('other_referee').value
document.getElementById('referee_new').add(option,null);
document.getElementById('referee_new').value = document.getElementById('other_referee').value;

Not elegant, but you get the idea.

answered Sep 27, 2013 at 19:22

Jordan Edwards

512 bronze badges

Comments

Hamid · Accepted Answer · 2017-01-19 13:51:29Z

2

 <script language="javascript" type="text/javascript">
        function selectFunction() {
             var printStr = document.getElementById("select").options[0].value
            alert(printStr);
            document.getElementById("select").selectedIndex = 0;
        }
    </script>

edited Jan 19, 2017 at 13:51

Hamid

1,5632 gold badges21 silver badges33 bronze badges

answered Feb 28, 2012 at 22:59

Thit Lwin Oo

3,4283 gold badges22 silver badges23 bronze badges

Comments

Tayyab Hayat · Accepted Answer · 2022-02-22 05:18:26Z

2

This solved my issue, it was working fine with

var value = item[index].id;
$("#select2").val(value);

but not showing selected value, so

$("#select2").val(value).change();

OR

$("#select2").val(value).trigger('change');

works fine for me.

edited Feb 22, 2022 at 5:18

answered Apr 10, 2020 at 19:06

Tayyab Hayat

9631 gold badge11 silver badges24 bronze badges

Comments

Brad Falk · Accepted Answer · 2012-02-28 22:41:22Z

1

You can use the selectedIndex property to set it to the first option:

document.getElementById("select").selectedIndex = 0;

answered Feb 28, 2012 at 22:41

Brad Falk

1963 bronze badges

Comments

Suraj Rao · Accepted Answer · 2021-09-27 11:28:06Z

1

HTML

<div class="form-group" id="divnacionalidad">                                                               
    <label>Nacionalidad:</label>                                                            
    <select id="nacionalidad" class="form-control">                                                               
        <option value="0">Seleccione una opcion</option>
        <option value="2">Costa Rica</option>
        <option value="1">Nicaragua</option>
    </select>
</div>

Javascript:

function buscarIndice(caden, valor) {
    let cadena = document.getElementById(caden);
    for (let i = 0; i < cadena.children.length; i++) {
        if (cadena.children.item(i).textContent.trim() === valor.trim()) {
            cadena.options.item(i).selected = 'selected';
        }
    }
}

edited Sep 27, 2021 at 11:28

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Sep 27, 2021 at 11:21

alfredo eva

111 bronze badge

3 Comments

alfredo eva Over a year ago

El presente codigo, utilizara un select que radica en un html y mediante esa funcion se permite un intercambio de selección en dependencia de un texto ya establecido en los option.

Suraj Rao Over a year ago

Please use edit link instead of adding information in the comments. Also, please write your answer in English, as Stack Overflow is an English site.

alfredo eva Over a year ago

Algo importante los value="Numero" de los option, tiene que estar ordenado de forma ascendente ( 0,1,2,3...) Para que funcione.

Naranjito1971 · Accepted Answer · 2024-02-07 16:11:55Z

1

This question is old but I was having the same issue and my answer may help a beginner like me. In this example, Option1 is the default value shown in the select.

<select id="myselect">
    <option value = "opt1">Option1</option>
    <option value = "opt2">Option2</option>
</select>

In my case, I made a mistake trying to change the select value with the text shown in the select "Option1" and not with the actual value "opt1" So when trying to change the value with javascript this way

document.getElementById('myselect').value = 'Option1';

I got an empty select.

Instead, I used :

document.getElementById('myselect').value = 'opt1';

I hope this helps.

answered Feb 7, 2024 at 16:11

Naranjito1971

414 bronze badges

Comments

beppe9000 · Accepted Answer · 2022-03-24 01:34:09Z

0

We can iterate the option to find and set the selected attribute on the respective option.

document.getElementsById('select').childNodes.forEach((e, i, a) => {
    if (e.value == "<the value you want to be selected>") {
        e.selected = "selected";
    }
});

For the original option just use its value content.

edited Mar 24, 2022 at 1:34

answered Mar 11, 2022 at 21:51

beppe9000

1,1321 gold badge13 silver badges32 bronze badges

3 Comments

Lewis Morris Over a year ago

you should check for comparison of the e variable not a.

beppe9000 Over a year ago

@LewisMorris thanks, i missed the typo. fyi you can always use the edit function to propose edits directly

Lewis Morris Over a year ago

fair play, will do in future.

Collectives™ on Stack Overflow

How to change a <select> value from JavaScript

13 Answers 13

3 Comments

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

3 Comments

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

3 Comments

Linked

Related