Показать / скрыть раскрывающийся список, используя Jquery, используя Viewbag - PullRequest
Новая
       124

Показать / скрыть раскрывающийся список, используя Jquery, используя Viewbag

0 голосов
/ 05 августа 2020

Привет, я пытаюсь создать сценарий для своего раскрывающегося списка, чтобы отображалась только часть моего раскрывающегося списка на основе моего выбора первого раскрывающегося списка. Вот пример того, что я пытаюсь сделать: http://jsfiddle.net/BRDRY/

Однако я не могу это сделать, так как использую Viewbag вместо обычного раскрывающегося списка. Так что я застрял в том, как реализовать это в моем собственном проекте, и мне действительно нужна помощь в том, как это сделать, поскольку я не слишком разбираюсь в скриптах. Было бы здорово, если бы кто-нибудь пошагово меня вел. Большое спасибо за просмотр.

Код страницы просмотра: 

<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>

Код контроллера: 

 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);
    }

1 Ответ

2 голосов
/ 05 августа 2020

В соответствии с вашим кодом пользовательского интерфейса вы должны установить значение параметра PreferenceTypeID так же, как идентификатор селектора

Например: 

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"});

Итак, в вашем случае результат вашей базы данных _context .PreferenceType должен быть таким, как показано ниже. введите описание изображения здесь

...