I want to generate dynamic checkboxes on the basis of selected value of dropdown.
@Html.DropDownListFor(x => x.Fromsource, new SelectList(Model.Fromsource, "Value", "Key"), "---Select---", new
{
})
@Html.CheckBox("Tosource", false, new { @class = "dropdown" })
<script>
$("#Fromsource").change(function () {
var urlSource = '@Url.Action("FillToSource", "PublishPost")';
var fromsouyrcetype = $(this).val();
if (fromsouyrcetype != "") {
$.ajax({
url: urlSource,
method: "GET",
data: {
"sourceType": fromsouyrcetype
},
success: function (result) {
$.each(result, function (index, value) {
//what to write here?
//value.name = name of the checkbox
//value.id = value of the checkbox
});
}
});
} else {
}
});</script>
value.id and value.name are the values which i want to fill for checkbox as mentioned in the comment above.
If I understand your question right, you want to dynamically create checkboxes based on the result that you are getting from server (query performed each time that dropdown value changed):
<div id="checkboxContainer"></div>
<script>
$("#Fromsource").change(function () {
var urlSource = '@Url.Action("FillToSource", "PublishPost")';
var fromsouyrcetype = $(this).val();
if (fromsouyrcetype != "") {
$.ajax({
url: urlSource,
method: "GET",
data: {
"sourceType": fromsouyrcetype
},
success: function (result) {
$('#checkboxContainer').empty();
var content;
$.each(result, function (index, value) {
content += '<input type="checkbox" name="'+ value.name +'" id="'+value.id+'"/>'
});
$('#checkboxContainer').html(content);
}
});
} else {
$('#checkboxContainer').empty();
}
});</script>