select2 jquery with asp.net with images -
i have jquery select2 integrated webform working flawlessly want integrate dropdown dynamic image path
scenario1 dropdown static number of fields , known images 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 found digging add images in dropdown using below 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 need thing done
that is
image path heat meter comes database
means when list populated data comes database both text , value of
<asp:listitem> are occupied text , id put image path , how set image path
what can create ajax call server using jquery. write logic fetch specific images each drop down option , when return data web page can loop through result set,find matching drop down option , set "data-imagepath" (or other similar name) location of image.then whenever need access field can read this:
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:
<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; (var = 0; < 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:
Comments
Post a Comment