I have a dropdown with few options in it and a onclick event on a button , after making the selection from the dropdown and clicking on the button how do i set the dropdown to its default that is select by JavaScript.
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
function addOption(){
if (userType.value === "Select") {
alert("Please select correct option");
}
else{
console.log(userType.options[userType.selectedIndex].value);
}
document.getElementById('userType').value = "Select";
}
I have a dropdown with few options in it and a onclick event on a button , after making the selection from the dropdown and clicking on the button how do i set the dropdown to its default that is select by JavaScript.
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
function addOption(){
if (userType.value === "Select") {
alert("Please select correct option");
}
else{
console.log(userType.options[userType.selectedIndex].value);
}
document.getElementById('userType').value = "Select";
}
Share Improve this question edited Aug 3, 2017 at 6:14 alittlecurryhot asked Aug 3, 2017 at 5:52 alittlecurryhotalittlecurryhot 4971 gold badge6 silver badges16 bronze badges 6- you mean you want to reset to default when you click on button? – ZearaeZ Commented Aug 3, 2017 at 5:57
- yes, the values of the selected option gets passed on and the dropdown sets to "Select" – alittlecurryhot Commented Aug 3, 2017 at 5:58
- so you want the drop down to reset after clicking the button. i mean it should reset to the default value in the drop down ? – Jok3r Commented Aug 3, 2017 at 5:59
- @Jok3r yes!!!!! – alittlecurryhot Commented Aug 3, 2017 at 6:00
- you can use "$('select').prop('selectedIndex', 0);" to reset you selectbox value. – ZearaeZ Commented Aug 3, 2017 at 6:03
4 Answers
Reset to default 2Pretty straight forward. Just select the input by id and set its value to whatever the default should be.
function addOption(){
// Do stuff...and then:
document.getElementById('userType').value = "Select";
}<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
<html>
<body>
<form id="myForm">
<select id="a">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<input type="button" onclick="myFunction()" value="Reset">
</form>
</body>
</html>
<script>
function myFunction() {
document.getElementById('a').selectedIndex = 0;
}
</script>try this
Here is your working code:
$("button").click(function() {
$('select').prop('selectedIndex', 0);
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button">Send</button>You can attach change event to <select> element, declare a variable, at event handler set variable to true to verify that change event has occurred. At click of <button> set select .selectedIndex property to 0 if Boolean value is true, set Boolean to false.
<script>
var changed, select;
function addOption() {
if (changed) {
select.selectedIndex = 0;
changed = false;
}
}
onload = function() {
select = document.getElementById("userType");
select.onchange = function() {
changed = true;
}
}
</script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button" onclick="addOption()">Send</button>