'Bootstrap-Jquery multiselect dropdown is not showing the datalist

I want to populate a multiselect dropdown with the help of bootstrap-multiselect.js package. I am getting the data is shown in the inspect but dropdown is not showing any data in UI. I used these two packages istead of bootstrap-multiselect also but same result:

<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-multiselect.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/bootstrap-multiselect.js"></script>
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <style>
        .multiselect {
            width: 90% !important;
            height: 25px !important;
            padding-top: 1px !important;
        }

        ul.multiselect-container.dropdown-menu {
            width: 90% !important;
        }
    </style>
    <script>
        $(document).ready(function () {
            GetDropDown();
        });

        function GetDropDown() {
            var s = '<select id="ddl" style="width:100px;"></select>';
            $('#trbody').append(s);
            bindDrpDwn();
        }

        function bindDrpDwn() {
            $('#ddl').append($("<option></option>").val(0).html('--Select--'));
            for (var j = 0; j < 5; j++) {
                $('#ddl').append($('<option></option>').val(j).html('Test_' + j));
            }
            $('#ddl').attr('multiple', 'multiple');
            $('#ddl').multiselect
                ({
                    search: true,
                });
            $('#ddl').multiselect('deselect', '0');
            $('#ddl option').each(function () {
                $(this).prop('selected', false);
            });
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <thead>
                    <tr>
                        <th>DropDown1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="trbody">
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>

This is what I am getting when I am inspecting: But in UI dropdown is not showing any data.
Image-1
enter image description here

Image-2
enter image description here

Please help me with this issue. Thank You in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source