Not able to select multiple items on select2

Hi,

I am rather rather new to coding, specially web.
I came across Select2 a while ago and found it very interesting in what i had to do.
However, i encountered some difficulties.

I have a simple select2 in my code in form of a dropdownlist which is found in an updatepanel.
I have bound my dropdownlist to a database and i can select records as desired.

However, when the page loads and it retrieves data from the database, it needs to select at times several items from the dropdownlist at page load.

Here is what I have been able to do till now:

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
        
        <script type="text/javascript">
            $(function () {
                Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(){
                    $(".js-example-tokenizer").select2({
                        tags: true,
                        tokenSeparators: [';'],
                        closeOnSelect: true,
                        placeholder: "Choose",
                        multiple: true,
                        autoClear: false
                    });

                    $("#ddl1").on("select2:select select2:unselect select2:change", function (e) {
                        //this returns all the selected item
                        var items = $(this).val();

                        //Gets the last selected item
                        var lastSelectedItem = e.params.data.id;

                        alert("Selected value is: " + items);
                    });
                });
            });
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:DropDownList ID="ddl1" Width="300px" runat="server" CssClass="form-control js-example-tokenizer" ToolTip="Select ">
                            <asp:ListItem Text="Alice Mutton" Value="Alice Mutton"></asp:ListItem>
                            <asp:ListItem Text="Aniseed Syrup" Value="Aniseed Syrup"></asp:ListItem>
                            <asp:ListItem Text="Boston Crab Meat" Value="Boston Crab Meat"></asp:ListItem>
                            <asp:ListItem Text="Camembert Pierrot" Value="Camembert Pierrot"></asp:ListItem>
                            <asp:ListItem Text="Carnarvon Tigers" Value="Carnarvon Tigers"></asp:ListItem>
                            <asp:ListItem Text="Chai" Value="Chai"></asp:ListItem>
                            <asp:ListItem Text="Chang" Value="Chang"></asp:ListItem>
                            <asp:ListItem Text="Chartreuse verte" Value="Chartreuse verte"></asp:ListItem>
                        </asp:DropDownList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

            <script>
                function invokeButtonClick() {
                    $('#ddl1').val(["Chartreuse verte", "Chang"]);

                    $('#ddl1').trigger("change");
                }
            </script>
        </form>
    </body>
</html>

Default.aspx.vb

Private Sub form1_Load(sender As Object, e As EventArgs) Handles form1.Load
     ScriptManager.RegisterStartupScript(Page, Page.GetType(), "InvokeButton", "invokeButtonClick();", True)
End Sub

In spite of selecting 2 items to be selected, it only selects the first item.

Also, when an item is selected automatically at page load it does not trigger the on select function to give an alert of the selectected items.

Can you help please?

If you reverse the order of the two values in the array you’re passing to programmatically select those items in the Select2, does it still only select one of them, or does it select both?

If that doesn’t work, can you do a View Source on the page in your browser and paste here the generated HTML that comes from the ASP page?