C# 如何在下拉列表完全绑定到pageload的位置更改时绑定数据列表？

我想在加载时显示全部图像，以便成功显示，但现在我想在条件基础上显示，如颜色为“红色”，则应在数据列表中仅显示红色图像..我尝试并获取了相应的数据，但显示了所有图像。。那么，如何只显示那些在Jquery中获取数据的图像呢

/asp.net数据列表控件/

'class=“image”height=“60px”width=“100px”/

/页面加载时显示以下数据图像/

$（函数（）{
$（“[id*=dlCustomers]”）。隐藏（）；
$.ajax({
类型：“POST”，
url:“Default2.aspx/GetCustomers”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：一旦成功，
故障：功能（响应）{
警报（response.d）；
},
错误：函数（响应）{
警报（response.d）；
}
});
});
函数OnSuccess（响应）{
var xmlDoc=$.parseXML（response.d）；
var xml=$（xmlDoc）；
var customers=xml.find（“表”）；
var repeatColumns=parseInt（“”）；
var rowCount=Math.ceil（customers.length/repeatColumns）；
var i=0；
while（i

/试图显示下拉选择值图像/

$（文档）.ready（函数（）{
$（'#ddlColor'）。on（'change'，function（）{
var color=$（'#ddlColor:selected'）。text（）；
警报（颜色）；
$（“[id*=dlCustomers]”）。隐藏（）；
$.ajax({
类型：“POST”，
url:“Default2.aspx/GetColorFabrics”，
数据：“{'color'：'”+color+“}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：OnSuccessColor，
故障：功能（响应）{
警报（response.d）；
},
错误：函数（响应）{
警报（response.d）；
}
});
});
});
函数OnSuccessColor（响应）{
警惕（“你好”）；
警报（response.d）；
var xmlDoc=$.parseXML（response.d）；
var xml=$（xmlDoc）；
var customers=xml.find（“表”）；
var repeatColumns=parseInt（“”）；
var rowCount=Math.ceil（customers.length/repeatColumns）；
var i=0；
while（i

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

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