Menu
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?
821
In order to change an element, you use its argument name for the value you wish to change. For example, let's say we have a button, and we wish to change its value. <input type="button" id="myButton" value="I'm a button!">
Use the value property to set the value of a select element, e.g. select. value = 'new value' . The value property can be used to set or update the value of a select element. To remove the selection, set the value to an empty string.
To get the value of a select or dropdown in HTML using pure JavaScript, first we get the select tag, in this case by id, and then we get the selected value through the selectedIndex property. The value "en" will be printed on the console (Ctrl + Shift + J to open the console).
You can use sessionStorage also. But using these is not a good way as there may be another web application that is using same key(selectValue) to store any value. In that case that value 'll override. So if you somehow wants to use it select a key uniquely like yourAppName-selectval or something like that.
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.
174
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
