帶asp.net的select2 jquery與圖像

Question

我有一個完美運行的jquery select2集成的Webform，但想與帶有動態圖像路徑的另一個下拉列表集成

靜態字段數和具有已知圖像名稱（例如，

<asp:DropDownList runat="server" ID="ddl_heat" CssClass="selectdropdown form-control">
    <asp:ListItem Text="Select" Selected="True" Value="" disabled="disabled"></asp:ListItem>
    <asp:ListItem Text="Low" Value="1"></asp:ListItem>
    <asp:ListItem Text="Moderately Low" Value="2"></asp:ListItem>
    <asp:ListItem Text="Moderate" Value="3"></asp:ListItem>
    <asp:ListItem Text="Moderately High" Value="4"></asp:ListItem>
    <asp:ListItem Text="High" Value="5"></asp:ListItem>
</asp:DropDownList>

現在我通過使用下面的jQuery通過在下拉列表中添加圖像來發現

function formatHeat(heatlvl) { if (!heatlvl.id) { return heatlvl.text; } var $heat = $('<span><img src="images/heatmeter/heatmeter ' + heatlvl.text + '.png" class="img-flag" width="50px"/> ' + heatlvl.text
+ '</span>'); return $heat; }; $('.selectdropdown').select2({ templateResult: formatHeat });

這東西飛快地工作

現在我需要做另一件事

那是

熱量表的圖像路徑來自數據庫

表示列表填充時，數據來自數據庫，但文本和值

<asp:ListItem>

被文本和ID占用，因此在哪里放置圖像路徑以及如何設置圖像路徑

Answer 1

您可以做的是使用jQuery創建對服務器的AJAX調用。 編寫邏輯以獲取每個下拉選項的特定圖像，當您將此數據返回到網頁時，您可以遍歷結果集，找到匹配的下拉選項並設置“ data-imagepath”（或任何其他類似名稱））到圖片的位置。然后，只要您需要訪問該字段，就可以像這樣簡單地閱讀它：

alert($("#ddl_heat option[value='1']").attr("data-imagepath"));

后面的代碼：

public partial class SetDropDownImagePath : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Services.WebMethod]
    public static List<MyImage> GetImagePaths()
    {
        var image1 = new MyImage { ID = 1, Path = "../Images/bullet.png" };
        var image2 = new MyImage { ID = 2, Path = "../Images/bullet.png" };
        return new List<MyImage> { image1, image2 };
    }
}

public class MyImage
{
    public int ID { get; set; }
    public string Path { get; set; }
}

.ASPX：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: 'SetDropDownImagePath.aspx/GetImagePaths',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    debugger;
                    for (var i = 0; i < response.d.length; i++) {
                        var id = response.d[i].ID;
                        var imagePath = response.d[i].Path;
                        $("#ddl_heat option[value='" + id + "']").attr("data-imagepath", imagePath);
                    }
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList runat="server" Width="200" ID="ddl_heat" CssClass="selectdropdown form-control">
            <asp:ListItem Text="Select" Selected="True" Value="" disabled="disabled"></asp:ListItem>
            <asp:ListItem Text="Low" Value="1"></asp:ListItem>
            <asp:ListItem Text="Moderately Low" Value="2"></asp:ListItem>
            <asp:ListItem Text="Moderate" Value="3"></asp:ListItem>
            <asp:ListItem Text="Moderately High" Value="4"></asp:ListItem>
            <asp:ListItem Text="High" Value="5"></asp:ListItem>
        </asp:DropDownList>
    </form>
</body>

輸出：

帶asp.net的select2 jquery與圖像

問題描述

1 個解決方案

解決方案1
0 2016-06-11 13:29:41

帶asp.net的select2 jquery與圖像

問題描述

1 個解決方案

解決方案1 0 2016-06-11 13:29:41

解決方案1
0 2016-06-11 13:29:41