How to change a <select> value from 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.
$('#select').val('defaultValue');
$('#select').change();
This will also trigger events hooked to this select
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>