Dynamically populate a select element from JSON data with jQuery

In this tutorial, we will learn how to dynamically populate a select element from JSON data with jQuery.

Dynamically populate a select element from JSON data with jQuery



Step to achieve the bind drop down by Json Data.
1. Import Jquery CDN.
2. Add a dropdown on the page.
3. In the script section store JSON data in the variable.
4. Use each function of jquery to bind the Dropdown.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>

        var jsonList =

        {

            "dropdownlist":

                [

                    { "id": "2", "name": "Delhi" },

                    { "id": "3", "name": "UP" },

                    { "id": "4", "name": "MP" },

                    { "id": "5", "name": "AP" }

                ]

        }

        $(document).ready(function ()

        {

            $.each(jsonList.dropdownlist, function (data, value)

            {

                $("#DLState").append($("<option></option>").val(value.id).html(value.name));

            });

        });

    </script>

</head>

<body>

    <select id="DLState">

    </select>

</body>

</html>

So, we have learned how we can bind dropdown using JSON, If you have any doubt, please feel free to comment below.

Post a Comment

Post a Comment (0)

Previous Post Next Post