In this article I will explain with an example, how to reset (clear) ListBox selection (selected values) using JavaScript and jQuery.
Reset (Clear) ListBox selection (selected value) using JavaScript
The following HTML Markup consists of an HTML ListBox (Multiple Select DropDown) control and a Button.
When the Button is clicked, the Reset JavaScript function is executed. Inside this function, the SelectedIndex property of the ListBox is set to 0 (First Item). -1 (No selection).
<select id="lstFruits" style="width: 150px;" multiple = "multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Pineapple</option>
<option value="6">Papaya</option>
<option value="7">Grapes</option>
</select>
<br />
<hr />
<input type="button" id="btnReset" value="Reset" onclick="Reset();" />
<script type="text/javascript">
function Reset() {
var listBox = document.getElementById("lstFruits");
listBox.selectedIndex = -1;
}
</script>
Reset (Clear) ListBox selection (selected value) using jQuery
The following HTML Markup consists of an HTML ListBox (Multiple Select DropDown) control and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, the SelectedIndex property of the ListBox is set to -1 (No selection).
<select id="lstFruits" style="width: 150px;" multiple = "multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Pineapple</option>
<option value="6">Papaya</option>
<option value="7">Grapes</option>
</select>
<br />
<hr />
<input type="button" id="btnReset" value="Reset" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnReset").bind("click", function () {
$("#lstFruits")[0].selectedIndex = -1;
});
});
</script>
Screenshot
![Reset (Clear) ListBox selection (selected values) using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
