Search code examples
jqueryasp.net-coreasp.net-core-mvcdropdownviewbag

Show/Hide dropdown list using Jquery using Viewbag

Hi I am trying to script my drop-down list so that only some of my drop-down list will show based on my selection of the first drop down list. An example of what I am trying to do is here: http://jsfiddle.net/BRDRY/

However I am not able to do it as I am using Viewbag instead of a normal drop down list. So I am stuck on how to implement it onto my own project and I really need help on how to do it as I am not too proficient in scripting. If someone would guide me step by step it would be really nice. Thank you so much for viewing.

View Page Code:

<script $('#PreferenceTypeID').change(function() {

// Hide all drop downs sharing the CSS class "toggledDropDown".
$('.toggledDropDown').hide();

// Build a selector for the selected drop down
var selector = ('.toggledDropDown[data-pref-val="' + $(this).val() + '"]');

// Show the selected drop down
$(selector).show();});</script>


<select id="PreferenceTypeID">
<option value="0">-- select --</option>
<option value="1001">Branch Zone</option>
<option value="1002">Staff Preference</option>
<option value="1003">Work Description</option>

<p>The other 3 list are:</p>
    
<p>Branch List</p>
<select class="toggledDropDown" data-pref-val="1001">
    <option value="1">Branch 1</option>
    <option value="2">Branch 2</option>
    <option value="3">Branch 3</option>
</select>

<p>Staff List</p>
<select class="toggledDropDown" data-pref-val="1002">
    <option value="1">Staff 1</option>
    <option value="2">Staff 2</option>
    <option value="3">Staff 3</option>
</select>

<p>Work List</p>
<select class="toggledDropDown" data-pref-val="1003">
    <option value="1">Work 1</option>
    <option value="2">Work 2</option>
    <option value="3">Work 3</option>
</select>

<head>
    <link rel="stylesheet" type="text/css" href="~/css/site.css">
</head>

Controller Code:

 public IActionResult CreateStaffPreference()
    {

        ViewData["BranchZoneID"] = new SelectList(_context.BranchZone, "BranchZoneID", "BranchZoneName");
        ViewData["PreferenceTypeID"] = new SelectList(_context.PreferenceType, "PreferenceTypeID", "PreferenceName");
        ViewData["StaffID"] = new SelectList(_context.Staff, "StaffID", "StaffName");
        ViewData["WorkDescriptionID"] = new SelectList(_context.WorkDescription, "WorkDescriptionID", "WorkDescriptionName");
        return View();
    }

    // POST: StaffPreferenceModels/Create
    // To protect from overposting attacks, enable the specific properties you want to bind to, for 
    // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> CreateStaffPreference([Bind("StaffPreferenceID,PreferenceTypeID,StaffPreferenceValue,StaffPreferenceSetDate,BranchZoneID,StaffID,WorkDescriptionID")] StaffPreferenceModel staffPreferenceModel)
    {
        if (ModelState.IsValid)
        {
            staffPreferenceModel.StaffPreferenceID = Guid.NewGuid();
            _context.Add(staffPreferenceModel);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(ProfilePage));


        }
        ViewData["BranchZoneID"] = new SelectList(_context.BranchZone, "BranchZoneID", "BranchZoneName", staffPreferenceModel.BranchZoneID);
        ViewData["PreferenceTypeID"] = new SelectList(_context.PreferenceType, "PreferenceTypeID", "PreferenceName", staffPreferenceModel.PreferenceTypeID);
        ViewData["StaffID"] = new SelectList(_context.Staff, "StaffID", "StaffName", staffPreferenceModel.StaffID);
        ViewData["WorkDescriptionID"] = new SelectList(_context.WorkDescription, "WorkDescriptionID", "WorkDescriptionName", staffPreferenceModel.WorkDescriptionID);
        return View(staffPreferenceModel);
    }
Solution

  • As per your UI code, you have to set the PreferenceTypeID option value same as selector Id

    Like:

    ViewData["PreferenceTypeID"] = new SelectList(
new SelectListItem{ Value="StaffPreferenceValue",Text="Staff Preference"},
new SelectListItem{ Value="WorkDescriptionID",Text="Work Description"},
new SelectListItem{ Value="BranchZoneID",Text="Branch Zone"},
new SelectListItem{ Value="StaffID",Text="Staff"});

    So in your case your database result of _context.PreferenceType is should be like below. enter image description here