'Reset Dropdown value on button click

I am calling a jquery function to clear my all input fields on button click, but my requirement is when you click on clear all button it should reset my dropdown value to 1 index not to 0 index.

please let me know how i can do this.

function ClearAll() {
    $("#BasicCaseStatus").val(1); // This is my dropdown
}

This is my button.

<a href="#"  id="SearchClear" onclick="ClearAll()" class="clearallLink" >Clear All</a>
javascriptjqueryhtml


Solution 1:[1]

Try this:

$('select option:eq(1)').prop('selected', 'selected')???;?

It will select the second <option> in the dropdownlist. Or if you wanted to do this for a particular dropdown:

$('#BasicCaseStatus option:eq(1)').prop('selected', 'selected')???;?

Solution 2:[2]

First you want to deselect all options, then filter to the second option and select it.

$('a.clearallLink').on('click', function() {
    $('#BasicCaseStatus option').prop('selected', false).eq(1).prop('selected', true);
});

Note this works with jQuery 1.7 and onwards, I believe.

Solution 3:[3]

function dropdown_clear()
    {
        $('#dropdownlist').html(null);
    }

Here, I had created a function for clear the dropdown list on button click. Now, juzt copy paste the complete function and juzt call it on the button click.

Solution 4:[4]

Js:

$('span').click(function(){ $("#BasicCaseStatus").val(1); });?

Html:

<select id="BasicCaseStatus">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span>Clear All</span>

?Link: http://jsfiddle.net/J5EE7/

Solution 5:[5]

None of the above answers would work If the default selected option is not the first one. The best way to achieve this is to wrap a select dropdown in <form> tag and call the reset() function. 

<form id='frm'>
<select id="BasicCaseStatus">
<option>1</option>
<option selected>2</option>
<option>3</option>
</select>

<span>Clear All1 | </span>
</form>

$('span').click(function(){  
  $('form')[0].reset()
});

Demo: http://jsfiddle.net/KS6Yh/

Solution 6:[6]

  1. Don't write javascript code in HTML file (Remove onclick)
  2. Use this js code to select second value from the list:

$('#BasicCaseStatus').prop('selectedIndex', 1);

A working example

Solution 7:[7]

be it in jquery or javascript :-

$('#idname').html(null); or 
document.getElementById('#idname').selectedIndex = 0;  or 
document.getElementById('#idname').selectedIndex = -1;  

the options hasn't worked for me in dynamic dropdown list. so, i have tried

$('#idname').val("")       

try oneself for good results.

Solution 8:[8]

Use this for JQuery $("#droplist").empty();

Solution 9:[9]

I think the most elegant solution is this 

$('#BasicCaseStatus option:eq(1)').prop("selected",true);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Darin Dimitrov
Solution 2 GregL
Solution 3
Solution 4 Mattia Larentis
Solution 5 codef0rmer
Solution 6 Nerijus Gedrimas 'Nereus Calm'
Solution 7 Ravichand
Solution 8 madhu
Solution 9 franzisk

Related Questions