Question

我有一个jquery select2集成的webform 工作完美无瑕但希望与动态图像路径的另一个下拉列表集成

scenario1 具有静态字段数的下拉列表和具有已知图像名称的已知图像像

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

被text和id占用那么放置图像路径的位置以及如何设置图像路径

Answer 1

您可以使用jQuery创建对服务器的AJAX调用。写入逻辑以获取每个下拉选项的特定图像，当您将此数据返回到网页时，您可以遍历结果集，找到匹配的下拉选项并设置＆＃34; data-imagepath＆＃34; （或任何其他类似名称）到图像的位置。然后，只要您需要访问此字段，您可以像这样阅读：

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>

<强>输出：

select2 jquery with asp.net with images

1 个答案: