How to change a <select> value from JavaScript
JavascriptHtmlJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
> 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 - Javascript
$('#select').val('defaultValue');
$('#select').change();
This will also trigger events hooked to this select
Solution 4 - Javascript
document.getElementById("select").selectedIndex = 0 will work
Solution 5 - Javascript
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 - Javascript
If you would like it to go back to first option try this:
document.getElementById("select").selectedIndex = 0;
Solution 7 - Javascript
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 - Javascript
<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 - Javascript
You can use the selectedIndex property to set it to the first option:
document.getElementById("select").selectedIndex = 0;
Solution 10 - Javascript
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 11 - Javascript
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 12 - Javascript
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.