使用jQuery AJAX填充ASP.Net CheckBoxList ClientSide

时间:2017-06-27 19:12:28

标签: javascript c# jquery asp.net vb.net

我按照http://www.aspforums.net/Threads/120224/Populate-ASPNet-CheckBoxList-ClientSide-using-jQuery-AJAX/

上的说明操作

这会填充复选框列表,但点击的任何标签都会选中或取消选中复选框列表中的第一项。我如何修复代码让“for”标签指向正确的复选框 JavaScript返回xml

 <asp:CheckBoxList ID="chkaddressemails" Width="300px" runat="server">
 </asp:CheckBoxList>



 function GetDropDownData(o) {

            var ddlTestDropDownListXML = document.getElementById(o.id);


            // Provide Some Table name to pass to the WebMethod as a parameter.
            var tableName = ddlTestDropDownListXML.options[ddlTestDropDownListXML.selectedIndex].value;


            $.ajax({
                type: "POST",
                url: "Reports.aspx/GetDropDownItems",
                data: '{tableName: "' + tableName + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Table1");
                    var row = $("[id*=chkaddressemails] tr:last-child").clone(true);
                    $("[id*=chkaddressemails] tr").remove();
                    $.each(customers, function () {
                        var customer = $(this);

                        $("input", row).val($(this).find("Email").text());
                        $("label", row).html($(this).find("Grouping").text()); 

                        $("[id*=chkaddressemails] tbody").append(row);
                        row = $("[id*=chkaddressemails] tr:last-child").clone(true);

                    });
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }

1 个答案:

答案 0 :(得分:0)

以下是答案。 ajax调用一个静态函数,该函数返回转换为xml的数据表。 然后我清除旧数据并重新填充复选框列表。我也得到了值并将其放入文本框中。

<asp:DropDownList ID="ddladdresscustomers" Width="300px" AutoPostBack="false" onchange="GetDropDownData(this);" runat="server"></asp:DropDownList>

     function GetDropDownData(o) {

            var ddlTestDropDownListXML = document.getElementById(o.id);


            // Provide Some Table name to pass to the WebMethod as a parameter.
            var tableName = ddlTestDropDownListXML.options[ddlTestDropDownListXML.selectedIndex].value;


            $.ajax({
                type: "POST",
                url: "Reports.aspx/GetDropDownItems",
                data: '{tableName: "' + tableName + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Table1");

                    var table = $('<table></table>');
                    var counter = 0;
                    var customer = $(this);
                    $.each(customers, function () {




                        table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
                            type: 'checkbox', name: 'chklistitem', value: $(this).find("Email").text(), id: 'chklistitem' + counter
                        })).append(
                        $('<label>').attr({
                            for: 'chklistitem' + counter++
                        }).text($(this).find("Grouping").text()))));
                    });

                    var y = $('#<%= chkaddressemails.ClientID %>');   
                    getallfromcheckbox();
                    removeCheckBoxItem();
                    y.append(table);

                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }

function removeCheckBoxItem()
{



    $("[id*=chkaddressemails] :checkbox").parent().remove();

}
        function getallfromcheckbox()
{
            var retur = '';

                var y = $('#<%= txtaddressemail.ClientID %>');
            var names = [];
            $('[id*=chkaddressemails] input:checked').each(function () {
                names.push(this.name);

                retur += (this.value) +';';

            });


            document.getElementById("<%= txtscheduleemail.ClientID %>").value = retur;
        }