7

ASP.Net で SELECT2 をドロップダウン リストと組み合わせて使用​​しようとしています。

これは私の.aspxです

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ASPNet_SELECT2_1._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>a SELECT2 implementation in ASP.NET</title>
    <script src="scripts/js/jquery-1.12.0.js"></script>
    <script src="scripts/js/select2/select2.js"></script>
    <link rel="stylesheet" href="css/select2.css" />

    <script>
            $(document).ready(function () {
                $("#" + "<%=dd.ClientID%>").select2({
                placeholder: "Select a Subject",
                allowClear: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="dd" runat="server" ClientIDMode="Static" Width="300px" multiple="multiple"></asp:DropDownList>
        </div>
        <asp:Button ID="btnGetSelected" runat="server" Text="Get selected items" OnClick="btnGetSelected_Click" />&nbsp;<asp:Button ID="btnSetSelected" runat="server" Text="Set selected items" OnClick="btnSetSelected_Click" />
        <br />
        <asp:Literal ID="lit" runat="server"></asp:Literal>
    </form>
</body>
</html>

これは私のコードビハインドです

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ASPNet_SELECT2_1
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                for (int i = 0; i < 10; i++)
                {
                    ListItem l = new ListItem("Item " + i.ToString());
                    dd.Items.Add(l);
                }
            }
        }

        protected void btnGetSelected_Click(object sender, EventArgs e)
        {
            lit.Text = dd.Text;
        }

        protected void btnSetSelected_Click(object sender, EventArgs e)
        {

        }
    }
}

SELECT2 コントロールとドロップダウン リストのバインドは正常に機能します。また、ドロップダウン リストの「複数」属性を設定して、複数選択機能を持たせました。しかし、選択したアイテムを取得できません。また、これらの項目を設定できませんか。

複数の要素を選択してポストバックを実行すると (たとえば、ボタンのクリック時)、ポストバック後に 1 つのアイテムのみが選択されます。そして、私は常に選択された最初のアイテムを取得します。

選択したすべてのアイテムを取得し、ポストバックおよびコードを介して複数の選択したアイテムを設定するにはどうすればよいですか?

4

1 に答える 1

14

DropDownList を使用する代わりに runat="server" を含む HTML 選択タグを使用して解決しました。ポストバック機能などがデフォルトでコントロールに実装されており、簡単には変更できないと思います。

これは私のJSです

$(document).ready(function () {
    $("#select1").select2({
        placeholder: "Select a Subject",
        allowClear: true
    });
});

これは私の.aspxです

<select id="select1" name="select1" runat="server" multiple="true" style="width:300px"></select>

これは、選択した項目を埋めるための C# の分離コードです。

for (int i = 0; i < 10; i++)
{
    ListItem l = new ListItem("Item " + i.ToString(), i.ToString());
    select1.Items.Add(l);
}

これは、選択したアイテムを取得および設定する方法です

// GET SELECTED ITEMS
for (int i = 0; i <= select1.Items.Count - 1; i++)
{
    if (select1.Items[i].Selected)
        lit.Text += "<br /> &nbsp;&nbsp; - " + select1.Items[i].Text + " | " + select1.Items[i].Value;
}

// SET SELECTED ITEMS
select1.Items[2].Selected = true;
select1.Items[4].Selected = true;
于 2016-01-10T19:40:58.183 に答える