提交后如何从下拉列表中删除所选值

如何解决提交后如何从下拉列表中删除所选值

我正在laravel进行一个小型项目，那里有两个下拉菜单。

用户从第一个下拉菜单中选择主题，然后从第二个下拉菜单中选择成绩。

一旦用户从主题下拉列表中选择sub1来选择第二个主题，则第一个选定值就不会出现。

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

如何控制该问题，或如何在laravel中验证此结果以重复相同年级相同科目的成绩？

一旦我输入了10年级的数学分数，就第二次如果我想输入10年级的数学分数，那我就不能输入。

解决方法

如果您发布代码，则更容易理解到目前为止所做的事情。

据我了解，您可以通过两种方法实现这一目标。一个正在关注。

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

控制器

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

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

,

理想情况下，后端服务器/数据库应仅提供尚未提交的主题。另外，该页面应为每个主题包含单独的条目，因此整个页面在提交时将包含所有主题/年级。

但是，这是一种在页面刷新期间获取/设置/删除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，以便每个瞳孔的科目/成绩分别存储。重要的是要注意，存储的阵列将保留在您的浏览器中，直到您将其清除。 sessionStorage的替代方法是sessionStorage，它的工作方式相同，不同之处在于，如果关闭选项卡并结束会话，数据将会丢失。