Clear items from DropDownList (or) Select in jQuery.

 JQuery     sbo     Updated on Nov 11, 2014     VIKRAM     231   

Introduction:

In this article i will explain how to clear items from DropDownList (or) Select in jQuery.

Description:

In previous articles i explained How to replace string in Java ScriptHow many ways we can replace the string in Java ScriptHow to work with TextBox in Java ScriptHow to create a HTML Table dynamically in Java ScriptHow to Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table in Java Script and How to replace string in jQuery. Now i will explain how to clear items from DropDownList (or) Select in jQuery.

Clear items from DropDownList (or) Select in jQuery:

We can clear items from DropDownList (or) select by using below script:

Script:

$('#ddlRole').empty();

You can also find the complete example as shown below:

Full Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to work with DropDownList (or) Select in jQuery</title>
    <script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ClearItems() {
            $('#ddlRole').empty();
        }
    </script>
</head>
<body>
    <div>
        <select id="ddlRole" class="form-control">
            <option value="-1">Select</option>
            <option value="1">User</option>
            <option value="2">Admin</option>
            <option value="3">Super Admin</option>
        </select>
        <input type="button" value="Clear" onclick="ClearItems(this)" />
    </div>
</body>
</html>

In the above example, it will clear all the items from DropDownList (or) Select when we click on Clear button. empty() is a predefined jQuery method.

Output:

Before Clear

 

After Clear

Note:

Here we need to add jQuery library file reference. It is mandatory.

  Related Articles
Bind DropDownList using simple user defined method in ASP.Net
Set DropDownList value based on text/value in jQuery
Set DropDownList value based on text/value in Java Script
Get selected text/value from DropDownList (or) Select in jQuery
Get selected text/value from DropDownList (or) Select in Java Script
Get selected index from DropDownList (or) Select in jQuery
Get selected index from DropDownList (or) Select in Java Script
Clear items from DropDownList (or) Select in Java script
  Recent Articles
Bind DropDownList using simple user defined method in ASP.Net
Set DropDownList value based on text/value in jQuery
Set DropDownList value based on text/value in Java Script
Get selected text/value from DropDownList (or) Select in jQuery
Get selected text/value from DropDownList (or) Select in Java Script
Get selected index from DropDownList (or) Select in jQuery
Get selected index from DropDownList (or) Select in Java Script
Clear items from DropDownList (or) Select in Java script