Click here to Skip to main content
15,891,938 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to bind a checkboxlist on dropdownlist selection, i have been able to display a list on a multiselect dropdownlist on Lab selected index change, but adding a checkbox to the multiselect dropdown list is what i have not been able to do. Any assistance will be appreciated.

What I have tried:

My Ajax Function:

HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/jscript">
    $(document).ready(function () {
        $('#LabId').change(function () {
            $(".spina").show();
            $("#testType").prop("disabled", true);
            $.getJSON('/Lab/GetTestTypeList/' + $('#LabId').val(), function (data) {
                var items = '<option value = "0">---Select a Test Type---</option>';
                $.each(data, function (i, testType) {
                    items += "<option value='" + testType.Value + "'>" + testType.Text + "</option>";
                    $("#testType").prop("disabled", false);
                    $(".spina").hide();
                });
                $('#testType').html(items);
                $("#testType").prop("disabled", false);
                $(".spina").hide();
            });
        });
    });
</script>


My HTML Controls:

HTML
<div class="col-sm-7">
   <div class="form-group">
@Html.LabelFor(model => model.LabId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
   @Html.DropDownListFor(model => model.LabId, (IEnumerable<SelectListItem>)ViewBag.LabList, "---Select Lab---", new { @class = "form-control" })
  @Html.ValidationMessageFor(model => model.LabId, "", new { @class = "text-danger" })
 </div>
 </div>
  </div>


 <div class="col-sm-7">
   <div class="form-group">
   @Html.LabelFor(model => model.TestTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
   <div class="col-md-10">
      <select id="testType" name="testType" multiple="multiple" class="form-control" required="required">
   <option value="0">---Select a Test Type---</option>
     </select>
       @Html.ValidationMessageFor(model => model.TestTypeId, "", new { @class = "text-danger" })
     </div>
       </div>
         </div>


My C# Code:

C#
private void LoadLabDropDownList()
        {
            try
            {
                var getList = repository.GetSpecialtyListByRoleId(8);
                var items = getList.Select(t => new SelectListItem
                {
                    Text = t.FullName,
                    Value = t.UserId.ToString()
                }).ToList();

                ViewBag.AccountantList = items;
            }
            catch (Exception ex)
            {
                ViewBag.DisplayMessage = "Info";
                ModelState.AddModelError("", ex.Message);
            }
}


The code to load the second dropdown list:

C#
public JsonResult GetTestTypeList(string id)
        {
            if (!string.IsNullOrEmpty(id))
            {
                var labId = Convert.ToInt32(id);
                var testTypes = from s in db.TestTypes
                           where s.LabId == labId
                                select s;
                return Json(new SelectList(testTypes.ToArray(), "TestTypeId", "TestName"), JsonRequestBehavior.AllowGet);
            }
            else
            {
                var testTypeId = Convert.ToInt32(id);
                var testTypes = from s in db.TestTypes
                                where s.TestTypeId == 0
                                select s;
                return Json(new SelectList(testTypes.ToArray(), "TestTypeId", "TestName"), JsonRequestBehavior.AllowGet);
            }
        }

        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult LoadTestTypeByLabId(string labName)
        {
            var labList = GetTestType(Convert.ToInt32(labName));
            var labData = labList.Select(m => new SelectListItem()
            {
                Text = m.TestName,
                Value = m.TestTypeId.ToString(),
            });
            return Json(labData, JsonRequestBehavior.AllowGet);
        }

        public IList<TestType> GetTestType(int testTypeId)
        {
            return db.TestTypes.Where(m => m.TestTypeId == testTypeId).ToList();
        }
Posted
Comments
F-ES Sitecore 23-Nov-18 12:42pm    
You can't add checkboxes to dropdowns, the html components don't support it. You'll need to find a plug-in of some sort that has this feature.
Uwakpeter 23-Nov-18 13:38pm    
Sir, is there anyway I can achieve this using mvc checkbox list, I mean without the dropdown, if I can bind it to a checklist, that would be fine too.
F-ES Sitecore 23-Nov-18 14:22pm    
Uwakpeter 23-Nov-18 17:24pm    
Yes, I have seen this example while searching for a solution, my approach is a bit different, I want to populate the checkboxlist upon lab dropdown selection, I was not able to make it work that way. Any assistance would be appreciated.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900