如何在使用javascript选择下拉列表时动态创建复选框列表

Question

.js 代码：

function SelectBRMfrmMaterialYardChk() {
    debugger;
    var material = document.getElementById("ddl_Material_Type");
    var yard = document.getElementById("ddlYard");
    var yardno = yard.options[yard.selectedIndex].text;
    var material_type = material.options[material.selectedIndex].text;
    if (material_type != "Select" && material_type != "" && material_type != null && material_type != "None") {
        document.getElementById("spansubcategory").innerHTML = "";
        if (material_type != "" || material_type >= 0) {
            $.ajax({
                type: "POST",
                url: "UnloadScreen.aspx/SelectBRMfrmMaterialYardChk",
                data: "{'material_type':'" + material_type + "', 'yardno':'" + yardno + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (data) {
                    alert(data.d);                             
                    $('#chklstMaterial').empty();
                        var content;
                        $.each(data, function (index, value) {                        
                            alert(this);
                            $("#chklstMaterial").append($("<option></option>").val(this['Material_ID']).html(this['Material_ID']));
                        });
                        $('#chklstMaterial').html(content);                }
            });
        }
        return true;
    }
    else {
        document.getElementById("spansubcategory").innerHTML = "Select Sub Category";
        return false;
    }
}

在此，下拉菜单 - ddl_Material_Type & ddlYard 选择 ddlYard -> SelectBRMfrmMaterialYardChk() 被调用（onchange）&从选择 ddlYard （下拉），我想绑定（复选框列表) chklstMaterial。

.aspx 中的复选框列表：

<div style="overflow-x: scroll; width: 380px; overflow-y: scroll; height: 100px; text-align: left;">
      <asp:CheckBoxList ID="chklstMaterial" runat="server" CssClass="fields" RepeatColumns="2" RepeatDirection="Horizontal" ></asp:CheckBoxList>
</div> 

注意： alert(data.d) -> [{"MATERIAL_NAME":"RAM"}] alert(this) -> [{"MATERIAL_NAME":"RAM"}]

即将到来，表示复选框值正在警报中出现，但未显示复选框列表。

Answer 1

我下载了 JSON Newtonsoft (Nuget)。也许我所拥有的会有所帮助。如果你愿意，我可以和你一起工作。您可以使用原生 html 复选框列表代替 asp:CheckBoxList 以获得更好的结果。 asp:CheckBoxList 的行为是，当为某个属性设置时，它会呈现一个表格。我只是渲染一张桌子。但是，我的 .each 确实有效，这可以作为一个起点。我也使用 jQuery。

aspx

<%@ Page ClientIDMode="Static" Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="UnloadScreen.aspx.cs" Inherits="FredWebForm.UnloadScreen" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    Dynamic Checkboxes
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            function SelectBRMfrmMaterialYardChk() {
                debugger;
                var material = document.getElementById("ddl_Material_Type");
                var yard = document.getElementById("ddlYard");

                //yarno is text no value- could have been named yardvalue
                var yardno = yard.options[yard.selectedIndex].text;

                //material_type is text no value- could have been named material_typeValue
                var material_type = material.options[material.selectedIndex].text;
                if (material_type != "Select" && material_type != "" && material_type != null && material_type != "None") {
                    document.getElementById("spansubcategory").innerHTML = "";
                    //we already established material_type is a valid selection
                    //if (material_type != "" || material_type >= 0) {

                    //!!!!Important for webforms go into RouteConfig.RegisterRoutes 
                    //replace content with:
                    //var settings = new FriendlyUrlSettings();
                    //settings.AutoRedirectMode = RedirectMode.Off; // RedirectMode.Permanent
                    //routes.EnableFriendlyUrls(settings);

                    var PassedData = { material_type: material_type, yardno: yardno };
                    $.ajax({
                        type: "POST",
                        url: "UnloadScreen.aspx/SelectBRMfrmMaterialYardChk",
                        dataType: "json",
                        data: JSON.stringify({ formVars: PassedData }),
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            $('#chklstMaterial').empty();
                            var theData = JSON.parse(data.d);
                            var chk = "";
                            $("#theDiv").html("<table id='chklstMaterial' class='fields'><tr><td><input id='chklstMaterial_0' type='checkbox' name='ctl00$MainContent$chklstMaterial$chklstMaterial_0' value='CheckBoxValue' /><label for='chklstMaterial_0'>CheckBoxText</label></td><td><input id='chklstMaterial_1' type='checkbox' name='ctl00$MainContent$chklstMaterial$chklstMaterial_1' value='CheckBoxValue2' /><label for='chklstMaterial_1'>CheckBoxText2</label></td></tr></table>");
                        }
                    });
                    //}
                    return true;
                }
                else {
                    document.getElementById("spansubcategory").innerHTML = "Select Sub Category";
                    return false;
                }
            };
            $("#ddlYard").change(function () {
                SelectBRMfrmMaterialYardChk();
            })
        })
    </script>
    <div id="theDiv" style="overflow-x: scroll; width: 380px; overflow-y: scroll; height: 100px; text-align: left;">
        <asp:CheckBoxList ID="chklstMaterial" runat="server" CssClass="fields" RepeatColumns="2"
            RepeatDirection="Horizontal">
        </asp:CheckBoxList>
    </div>
    <asp:DropDownList ID="ddl_Material_Type" runat="server">
        <asp:ListItem Text="Select" Value="1" />
        <asp:ListItem Text="MaterialOption1" Value="2" />
        <asp:ListItem Text="MaterialOption2" Value="3" />
        <asp:ListItem Text="MaterialOption3" Value="4" />
        <asp:ListItem Text="None" Value="5" />
    </asp:DropDownList>
    <br />
    <span id="spansubcategory">
        <asp:DropDownList ID="ddlYard" runat="server">
            <asp:ListItem Text="Select" Value="1" />
            <asp:ListItem Text="YardOption1" Value="2" />
            <asp:ListItem Text="YardOption2" Value="3" />
            <asp:ListItem Text="YardOption3" Value="4" />
            <asp:ListItem Text="None" Value="5" />
        </asp:DropDownList>
    </span>
</asp:Content>

后面的代码

namespace AWebForm
{
    public class PassedData
    {
        public string material_type { get; set; }
        public string yardno { get; set; }
    }

    public partial class UnloadScreen : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod(EnableSession = true)]
        public static string SelectBRMfrmMaterialYardChk(PassedData formVars)
        {
            var r = JsonConvert.SerializeObject(formVars);
            return r;
        }
    }
}