'How to change a <select> value from JavaScript

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?

javascripthtml


Solution 1:[1]

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.

Solution 2:[2]

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>

Solution 3:[3]

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

This will also trigger events hooked to this select

Solution 4:[4]

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

Solution 5:[5]

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

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

Solution 6:[6]

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

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

Solution 7:[7]

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.

Solution 8:[8]

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

Solution 9:[9]

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

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

Solution 10:[10]

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';
        }
    }
}

Solution 11:[11]

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.

Solution 12:[12]

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.

Related Questions