Add and Remove Options in Select using jQuery


In this tutorial, you will learn how to remove and add the options in select box. jQuery is easy way to implements the JavaScript and reduce the time and efforts as well.

Add Options

We can dynamically add the options in select box using jQuery append() method.

$("#item").append("<option value='item" + i + "'>Item " + i + "</option>");

This example will add an option in select box on button click. Check the complete example here…

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var i = 0;
                $("#add").on("click", function () {
                    i++;
                    $("#item").append("<option value='item" + i + "'>Item " + i + "</option>");
                    alert("New item added.");
                });
            });
        </script>
    </head>
    <body>
        <h1>Add and Remove Options in Select using jQuery</h1>              
        <label for="item">Item List:</label>
        <select id="item">
            <option>Select Item</option>           
        </select>
        <button type="button" id="add">Add Item</button>
    </body>
</html>
Output:

Remove Options

To remove an option, you can use the remove() method of jQuery.

This will remove the selected option from the select box.

 $("#country option:selected").remove();

This will remove the option where condition is applied.

$("#country option[value='russia']").remove();

Check the complete example here…

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#remove").on("click", function () {
                    $("#country option:selected").remove();
                    alert("Selected country removed.");
                });
            });
        </script>
    </head>
    <body>
        <h1>Add and Remove Options in Select using jQuery</h1>
        <label for="country">Country List:</label>
        <select id="country">
            <option value="none">Select Country</option>
            <option value="india">India</option>
            <option value="usa">USA</option>
            <option value="russia">Russia</option>
            <option value="nepal">Nepal</option>
        </select>
        <button type="button" id="remove">Remove Country</button>
    </body>
</html>
Output:

Share this article on: