从下拉列表 Select2 中的多个值中获取选定值

Posted 2023-05-07

【中文标题】从下拉列表 Select2 中的多个值中获取选定值

【英文标题】：Get Selected value from multiple value in dropdownlist Select2

【发布时间】：2021-05-23 18:18:48

【问题描述】：

这个例子完全是我要找的 https://www.aspforums.net/Threads/339115/Searchable-multiselect-DropDownList-from-Database-using-jQuery-Select2-Plugin-in-ASPNet/

选择所有需要的国家后，我会点击提交按钮。我的问题是如何从 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>

这是后面的 C# 代码

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

    //    
    //

请帮忙。谢谢

【问题讨论】：

您还需要发布您的标记，另外这对我们了解数据是如何保存在 DOM 上的很有帮助，也许还可以检查元素并从浏览器共享标记。

@JamshaidK。我已经添加了我的代码

你还没有添加渲染后浏览器中的DOM Source。您还需要检查多选并共享该来源

右键单击文本框并单击检查元素。然后复制该 html 并在此处分享。

您想用多个选定的项目自动填充 select2 吗？或者你想从 select2 框中捕获值？

【参考方案1】：

您不能使用 DropDownList 进行多选。使用 ListBox 例如

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

在代码隐藏中：

foreach (ListItem item in ddl.Items)

    if (item.Selected)
    
       var text = item.Text;
       var value = item.Value;
    

【参考方案2】：

我通过创建一个字段得到答案，然后jQuery将数据存储到其中。

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

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