Clash Royale CLAN TAG#URR8PPP

How to create list of checkboxes dynamically on selection of dropdown with javascript

code of .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") 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;




In this, Dropdown - ddl_Material_Type & ddlYard
on selection of ddlYard -> SelectBRMfrmMaterialYardChk() is called (onchange) & from selection of ddlYard (dropdown), i want to bind (checkboxlist) chklstMaterial.

Checkboxlist in .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>


Note :
alert(data.d) -> ["MATERIAL_NAME":"RAM"]
alert(this) -> ["MATERIAL_NAME":"RAM"]

is coming,means checkbox value is coming in alert but checkbox list is not displaying.

1 Answer
1

I downloaded JSON Newtonsoft (Nuget). Perhaps what I have will help. I can work with you, if you want. Instead of asp:CheckBoxList you can use native html checkbox list for better results. The behavior of asp:CheckBoxList is that when set for a certain attribute, it renders a table. I just render a table. But, my .each does work and this can be a starting point. I also use 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 != ""
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>


code behind

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;





By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.