带asp.net的select2 jquery与图像

Question

i have a jquery select2 integrated webform working flawlessly but want to integrate with another dropdown with dynamic image path 我有一个完美运行的jquery select2集成的Webform，但想与带有动态图像路径的另一个下拉列表集成

scenario1 dropdown with static number of fields and known images with known image names like 静态字段数和具有已知图像名称（例如，

<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>

now i found by digging to add images in the dropdown by using below jquery 现在我通过使用下面的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 });

this thing works flwalessly 这东西飞快地工作

now i need some another thing to be done 现在我需要做另一件事

that is 那是

image path for heat meter comes from the database 热量表的图像路径来自数据库

means when list is populated data comes from database but both text and value of 表示列表填充时，数据来自数据库，但文本和值

<asp:ListItem>

are occupied by text and id so where to put image path and how do i set image path 被文本和ID占用，因此在哪里放置图像路径以及如何设置图像路径

Answer 1

What you can do is create an AJAX call to the server using jQuery. 您可以做的是使用jQuery创建对服务器的AJAX调用。 Write logic to fetch specific images for each drop down option and when you return this data back to the web page you can loop through the result set,find the matching drop down option and set the "data-imagepath" (or any other similar name) to the location of the image.Then whenever you need access to this field you can simply read it like this: 编写逻辑以获取每个下拉选项的特定图像，当您将此数据返回到网页时，您可以遍历结果集，找到匹配的下拉选项并设置“ data-imagepath”（或任何其他类似名称））到图片的位置。然后，只要您需要访问该字段，就可以像这样简单地阅读它：

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

Code behind: 后面的代码：

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: .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>

Output: 输出：

带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