How to bind Datalist on dropdown change where its binded?

$(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(); }

$(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(); }