如何在下拉列表中将Datalist绑定到完全绑定在pageload中的位置？ [英] How to bind Datalist on dropdown change where its binded in pageload fully?

问题描述

我想在加载时显示总图像，所以它成功但现在想在条件基础上显示，如果颜色是'红色'那么应该只显示datalist中的红色图像..我尝试获取特定数据但显示所有图片..所以如何只显示那些在Jquery中获取数据的图片？



/asp.net datalist control /

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

推荐答案

（function（）{

(function () {

（[id * = dlCustomers]）。hide（）;

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

.ajax（{
type：POST，
url：Default2.aspx / GetCustomers，
数据：'{}'，
contentType：application / json; charset = utf-8，
dataType：json，
成功：OnSuccess，
失败：函数（响应）{
alert（response.d）;
}，
错误：函数（响应）{
alert（response.d）;
}
}）;
}）;
函数OnSuccess（响应）{
var xmlDoc =

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

这篇关于如何在下拉列表中将Datalist绑定到完全绑定在pageload中的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！