使用视图袋使用Jquery显示/隐藏下拉列表
使用视图袋使用Jquery显示/隐藏下拉列表
提问于 2020-08-05 09:28:33
嗨，我正在尝试脚本我的下拉列表，以便只有一些我的下拉列表将显示根据我选择的第一个下拉列表。我想要做的一个例子是：http://jsfiddle.net/BRDRY/
然而，我无法做到这一点，因为我使用的是查看袋，而不是一个正常的下拉列表。因此，我被困在如何在我自己的项目上实现它，我真的需要帮助如何做它，因为我不太精通脚本。如果有人能一步一步地指导我，那就太好了。非常感谢你的收看。
查看页码：
<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
Stack Overflow用户
回答已采纳
发布于 2020-08-05 10:18:48
根据您的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的数据库结果应该如下所示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63262232
复制相关文章
相似问题
腾讯云开发者
