How to bind Datalist on dropdown change where its binded?

Question

How to bind Datalist on dropdown change where its binded in pageload fully?

 

I want to show total images  on load so its getting succesfully but now want to show on condition base like if color is 'red' then should show only red color images in datalist..I tried and getting perticular data but showing all images.. so how to show only those images which getting data in Jquery?

 

 

/*asp.net datalist control*/ 

  

<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="6"> 

<ItemTemplate> <table class="item"> 

<tr> <td> 

<img id="Image1" alt='<%# Eval("ImagePath") %>' src='<%# Eval("ImagePath") %>' class="image" height="60px" width="100px" /> </td> </tr> 

<tr> <td> <asp:Label class="postal" Height="20px" Width="100px" runat="server" Text='<%# Eval("ImageAssignedName") %>' Font-Size="10px"></asp:Label> 

</td> </tr> </table> </ItemTemplate> </asp:DataList>

 

/*/on page load showing these below data images/*/ 

 

$(function () {         

$("[id*=dlCustomers]").hide();         

$.ajax({             

type: "POST",             

url: "Default2.aspx/GetCustomers",             

data: '{}',             

contentType: "application/json; charset=utf-8",             

dataType: "json",             

success: OnSuccess,             

failure: function (response) {                 

alert(response.d); },             

error: function (response) {                 

alert(response.d); } }); }); 

function OnSuccess(response) { 

var xmlDoc = $.parseXML(response.d); 

var xml = $(xmlDoc); 

var customers = xml.find("Table"); 

var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>"); 

var rowCount = Math.ceil(customers.length / repeatColumns); 

var i = 0; while (i < repeatColumns * rowCount) { 

var row = $("[id*=dlCustomers] tr").eq(0).clone(true); 

for (var j = 0; j < repeatColumns; j++) { 

var customer = $(customers[i]); 

if (customer.length == 0) {                    

 $("table:last", row).remove(); } else {                    

  $(".postal", row).eq(j).html(customer.find("ImageAssignedName").text());     

 $(".image", row).eq(j).attr("src", customer.find("ImagePath").text());   

  $(".image", row).eq(j).attr("alt", customer.find("ImagePath").text()); }  

 i++; }            

 $("[id*=dlCustomers]").append(row); }         

$("[id*=dlCustomers] tr").eq(0).remove();         

$("[id*=dlCustomers]").show(); }

 

/*tried to display dropdown selected value images*/ 

 

$(document).ready(function () {         

$('#ddlColor').on('change', function () { 

var color = $('#ddlColor :selected').text();             

alert(color);             

$("[id*=dlCustomers]").hide();             

$.ajax({                 

type: "POST",                 

url: "Default2.aspx/GetColorFabrics",                 

data: "{'color':'" + color + "'}",                 

contentType: "application/json; charset=utf-8",                 

dataType: "json",                 

success: OnSuccessColor,                 

failure: function (response) {                     

alert(response.d); },                 

error: function (response) {                     

alert(response.d); } }); }); });  

function OnSuccessColor(response) {                 

alert('hello');         

alert(response.d); 

var xmlDoc = $.parseXML(response.d); 

var xml = $(xmlDoc); 

var customers = xml.find("Table"); 

var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>"); 

var rowCount = Math.ceil(customers.length / repeatColumns); 

var i = 0; 

while (i < repeatColumns * rowCount) { 

for (var j = 0; j < repeatColumns; j++) { 

var customer = $(customers[i]); 

if (customer.length == 0) {                     

$("table:last", row).remove(); } 

else {                      

$(".postal", row).eq(j).html(customer.find("ImageAssignedName").text()); 

$(".image", row).eq(j).attr("src", customer.find("ImagePath").text());  

$(".image", row).eq(j).attr("alt", customer.find("ImagePath").text()); }

i++; }             

$("[id*=dlCustomers]").append(row); }         

$("[id*=dlCustomers] tr").eq(0).remove();         

$("[id*=dlCustomers]").show(); }