提交后如何从下拉列表中删除选定的值答案

【问题标题】：How to remove selected values from dropdown once its submitted提交后如何从下拉列表中删除选定的值
【发布时间】：2021-01-13 18:29:31
【问题描述】：

我在 laravel 做一个小项目，我有两个下拉菜单。

用户从第一个下拉列表中选择主题，从第二个下拉列表中用户选择等级。

一旦用户从主题下拉列表中选择 sub1 以选择第二个主题，则第一个选择的值不应该在那里。

在图片中我想输入数学和 10 年级的分数，而当我想为 10 年级的其他科目添加分数时，数学科目不应该存在或至少应该禁用。

如何控制这一点，或者如何在 laravel 中验证这一点，以防止同一年级同一科目的重复分数？

一旦我输入了 10 年级数学的分数，第二次如果我想输入 10 年级数学的分数，它不应该让我输入。

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。发布努力和代码，而不仅仅是图片
前端使用哪个堆栈？
这取决于您的页面是如何提交的。例如，如果通过 ajax 完成，您仍然可以控制页面，因此可以轻松禁用选项。如果整个页面作为表单提交，您可以尝试将选定的主题存储在 localStorage 中，然后在页面重新加载时检索它并使用它来禁用选定的主题
@ATD 我正在提交整个表格，请问您能给我提供任何资源吗？
@Malinda 我在前端使用简单的引导程序。

标签： javascript laravel dropdown laravel-validation

【解决方案1】：

如果你发布你的代码，你会更容易理解到目前为止你做了什么。

据我了解，您可以通过几种方法实现这一目标。一个正在跟随。

您可以将现有标记从控制器传递给视图。

控制器

// Get the ids of already marked subjects for the given user
$markedSubjectIds = StudentMark::where('student_id', $studentId)
                                ->get()
                                ->pluck('subject_id')
                                ->toArray();

$subjects = // Subjects

return view('sudent.marks', compact('markedSubjectIds', 'subjects'));

查看

<select name="subject" class="form-control">
  @foreach($subjects as $subject)
    <option value="{{$subject->id}}" {{ in_array($subject->id, $markedSubjectIds) ? 'disabled' : ''}}>{{$subject->name}}</option>
  @endforeach
</select>

我相信您可以使用查询生成器从所有主题中过滤掉已标记的主题，但我不知道您的表结构如何。

【讨论】：

【解决方案2】：

理想情况下，后端服务器/数据库应该只提供尚未提交的主题。或者，该页面应包含每个科目的单独条目，因此整个页面在提交时包含所有科目/成绩。

但是，这是在页面刷新期间获取/设置/删除 localStorage 的简单方法。

脚本：

// id of pupil to ensure that selections are pupil-specific
// should be available from elsewhere but hardcoded here
// localStorage will use this to hold selected subjects for this pupil
const pupil = "1234"; 

// Variable to hold list of selected subjects
let subjectsSelected;

// Function to retrieve data from localStorage for this pupil
function retrieveSelected() {
  // retrieve localStorage data for this pupil
  let ls = localStorage.getItem(pupil);
 
  if (ls !== null) {
    // if localStorage already as data, parse it back from a JSON string
    subjectsSelected = JSON.parse(ls);
  } else {
    // otherwise create an empty array
    subjectsSelected = [];
  }
}

// Function to check if a subject on the select list is in the localStorage array
function disableSubjects() {
  retrieveSelected();
  let subjects = document.getElementById("subjects");
  for (let i = 1; i < subjects.length; i++) {
    let s = subjects[i].value;
    if (subjectsSelected.indexOf(s) > -1) {
      // if it is, disable it
      subjects[i].disabled = true;
    }
  }
}

// Function called by selecting an item on the subjects select list
function updateSelected() {
  let subjects = document.getElementById("subjects");
  // Get the value selected and add it to the array
  subjectsSelected.push(subjects.value);
  // JSON stringify the updated array and update localStorage
  localStorage.setItem(pupil, JSON.stringify(subjectsSelected));
}

function removeLocalStorage() {
  localStorage.removeItem(pupil);
}

window.onload = disableSubjects;

HTML：

<select id="subjects" onchange="updateSelected();">
  <option value="">Select subject</option>
  <option value="Maths">Maths</option>
  <option value="English Language">English Language</option>
  <option value="English Literature">English Literature</option>
  <option value="Physics">Physics</option>
  <option value="Chemistry">Chemistry</option>

</select>

<button onclick="removeLocalStorage();">Clear stored subjects</button>

将其放入一个新的 HTML 文件中，其中 SCRIPT 部分位于 HEAD 标记中，其余部分位于 BODY 标记中。选择一个主题并重新加载页面 - 现在应该禁用该主题。您可以单击按钮清除 localStorage - 但请注意，这有时需要一段时间才能更新。

这会将选择存储在一个数组中，并在进行选择时使用 JSON 将其转换为字符串（localStorage 无法存储数组），并在加载页面时将其转换回数组。显然，此示例不包含整个页面所需的所有功能 - 它只是展示如何从 localStorage 存储、检索和清除某些内容。另请注意，我包含了一个 pupil 变量来保存学生的某种 ID，以便每个学生的科目/成绩单独存储。请务必注意，存储的数组将保留在您的浏览器中，直到您清除它。 localStorage 的替代方案是 sessionStorage，它的工作方式相同，但如果您关闭选项卡并结束会话，数据会丢失。

【讨论】：