Clear items from DropDownList (or) Select in jQuery.

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 Script, How many ways we can replace the string in Java Script, How to work with TextBox in Java Script, How to create a HTML Table dynamically in Java Script, How 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: