使用 Viewbag 使用 Jquery 显示/隐藏下拉列表答案

【问题标题】：Show/Hide dropdown list using Jquery using Viewbag使用 Viewbag 使用 Jquery 显示/隐藏下拉列表
【发布时间】：2020-08-05 09:28:33
【问题描述】：

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

【问题讨论】：

标签： jquery asp.net-core asp.net-core-mvc dropdown viewbag

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

【讨论】：

它不能工作，因为它说“严重性代码描述项目文件行抑制状态错误 CS1503 参数 3：无法从 'Microsoft.AspNetCore.Mvc.Rendering.SelectListItem' 转换为 'string'跨度>
您能否更深入地解释一下，因为我不确定我需要更改哪些控制器代码。因为我有一个用于返回视图的“公共 IActionResult CreateStaffPreference()”和一个用于 HTTPPOST public async Task CreateStaffPreference([Bind("StaffPreferenceID,PreferenceTypeID,StaffPreferenceValue,StaffPreferenceSetDate,BranchZoneID,StaffID,WorkDescriptionID")] StaffPreferenceModel staffPreferenceModel)跨度>
基本上您的 PreferenceType 值应该与其他选择框 ID 相同，即。 imgur.com/43R0kyE
如果您无法使用 C#，那么只需更改您的 UI 和脚本来处理它，就像 jsfiddle.net/mehulrudatala/7hg0zdr1/1
请检查我的新更新，所做的和你写的完全一样，但是我的脚本由于某种原因不想隐藏其他下拉列表，即使我已经正确引用了 CSS。