![](/img/trans.png)
[英]jquery select2 work with dropdownlist asp.net server control
[英]select2 jquery with asp.net with images
我有一个完美运行的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占用,因此在哪里放置图像路径以及如何设置图像路径
您可以做的是使用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>
输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.