CODEWITHSUNDEEP
javascripthtml
alittlecurryhot
alittlecurryhot

Reputation: 487

how to set dropdown to select after onclick event in javascript

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";

}

Upvotes: 0

Views: 28815

Answers (4)

Jok3r
Jok3r

Reputation: 496

<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

Upvotes: 1

ZearaeZ
ZearaeZ

Reputation: 905

Here is your working code:

$("button").click(function() {
    $('select').prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/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>

Upvotes: 1

guest271314
guest271314

Reputation: 1

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>

Upvotes: 0

trevdev
trevdev

Reputation: 341

Pretty 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>

Upvotes: 2

Related Questions