Get Selected value from multiple value in dropdownlist Select2

Question

This example is totally what I'm looking for https://www.aspforums.net/Threads/339115/Searchable-multiselect-DropDownList-from-Database-using-jQuery-Select2-Plugin-in-ASPNet/

And after choose all the countries needed, I will click Submit button. My problem is on how to get all the selected value from ddl1.

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $(".js-example-placeholder-single").select2({
        placeholder: "Select",
        allowClear: true
        });
    });

</script></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>
    Upload Attachment
</h2>
<div>
    <br /><br />

    <asp:Label ID="Label2" runat="server" Text="Attachment :  " class="form-control"></asp:Label>&nbsp;&nbsp;
    <asp:FileUpload ID="FileUpload1" runat="server" class="form-control"/>
    <br /><br />

    <asp:Label ID="Label1" runat="server" Text="Plase select Staff No :  " class="form-control"></asp:Label>&nbsp;&nbsp;
    <asp:DropDownList ID="ddl1" Width="300px" runat="server" multiple="multiple" CssClass="form-control js-example-placeholder-single" ToolTip="Select " OnSelectedIndexChanged="ddl1_SelectedIndexChanged">
    </asp:DropDownList>
    <br /><br />

    <asp:Button ID="btnUpload" runat="server" Text="Upload Attachment" OnClick="btnUpload_Click"/>

    <br /><br />
</div>
</asp:Content>

And this is C# code behind

private void PopulateDropDownList()
{
    
    String strConnString = ConfigurationManager.ConnectionStrings["conn1"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    SqlCommand cmd = new SqlCommand();
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.CommandText = "sp_User";
    cmd.Connection = con;

    try
    {
        con.Open();
        ddl1.DataSource = cmd.ExecuteReader();
        ddl1.DataTextField = "IDName";
        ddl1.DataValueField = "StaffNo";
        ddl1.DataBind();
    }

    catch (Exception ex)
    {
        throw ex;
    }
    finally
    {
        con.Close();
        con.Dispose();
    }
}

protected void btnUpload_Click(object sender, EventArgs e)
{
    string message = "";
    string rnonow = DateTime.Now.ToString("yyyyMMdd_hhmmss");
    GetUploadRno();
    rnoUploaded = rno;

    Label4.Text = ddl1.SelectedValue; //this is where i'm stuck on how to call the ddl1 selected value. This code just only get the 1st selected value only eg : Brazil only not the other 2 below.
   
    //below is my trial to get the selected value but fail
    //foreach (ListItem item in ddl1.Items)
    //{
    //    if (item.Selected)
    //    {
    //       insert statement here

    //    }
    //}
}

Please help. Thank you

Answer 1

I got the answer by creating a field, and jQuery store the data into it.

$('[id*=ddl1]').on('change', function () {
            $('[id*=hfSelected]').val($(this).val());
        });

<asp:HiddenField ID="hfSelected" runat="server" />

Answer 2

You can't use DropDownList for multi-select. Use ListBox e.g.

<asp:ListBox ID="ddl" runat="server" SelectionMode="Multiple" CssClass="form-control js-example-placeholder-single" ToolTip="Select">
</asp:ListBox>

In code-behind:

foreach (ListItem item in ddl.Items)
{
    if (item.Selected)
    {
       var text = item.Text;
       var value = item.Value;
    }
}