Show/Hide 下拉列表使用 Jquery 使用 Viewbag

Question

您好，我正在尝试编写我的下拉列表脚本，以便根据我对第一个下拉列表的选择，仅显示部分下拉列表。我正在尝试做的一个例子是：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);
    }

Answer 1

根据您的 UI 代码，您必须将 PreferenceTypeID 选项值设置为与选择器 ID 相同

喜欢：

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 的数据库结果应该如下所示。

Show/Hide 下拉列表使用 Jquery 使用 Viewbag

Show/Hide dropdown list using Jquery using Viewbag

jquery

asp.net-core

asp.net-core-mvc

dropdown

viewbag