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>

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>

• javascript
• jquery
• html

9 Answers 9

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')​​​;​

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.

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 plete function and juzt call it on the button click.

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/J5EE7/

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/KS6Yh/

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

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.

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

I think the most elegant solution is this

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