在默认依赖项时重置 select 选项

Question

我用的是纯js。我很难将 select 框重置为默认值。正如您在下面的代码中看到的，我想让两个 select 相互依赖。如果我选择这个它只会显示这个，但是当我为选项值 = 0 选择第一个 select 时重置时，我希望第二个 select 也被重置为默认值。

const faculties = {
  1: ["Magister Manajemen", "Magister Teologi"],
  2: ["Ilmu Filsafat"],
  3: ["Pendidikan Agama", "Pendidikan Bahasa Inggris", "Pendidikan Ekonomi", "Pendidikan Luar Sekolah"],
  4: ["Akuntansi", "Manejemen"],
  5: ["Agroteknologi"],
  6: ["Informatika", "Sistem Informasi"],
  7: ["Profesi Ners", "Keperawatan"],
  8: ["Sekretari D3"],
};

let facultySelection = document.querySelector("#faculty");
let prodiSelection = document.querySelector("#pStudy");

facultySelection.addEventListener("change", (event) => {
  let prodies = faculties[event.target.value];
  pStudy.innerHTML = prodies.map((p) => `<option value="${p}">${p}</option>`).join("");

  reset();
});

function reset() {
  if (prodiSelection.selected == 0) {
    pStudy.innerHTML = `<option value="0">-- SELECT PROGRAM STUDY --</option>`;
  }
}

<div class="mb-3">
  <label for="faculty">Faculty</label>
  <select class="form-select mt-2" id="faculty" name="faculty">
    <option value="0" selected="selected">--SELECT FACULTY --</option>
    <option value="1">Pascasarjana</option>
    <option value="2">Fakultas Filsafat</option>
    <option value="3">Fakultas Keguruan dan Ilmu Pendidikan</option>
    <option value="4">Fakultas Ekonomi dan Bisnis</option>
    <option value="5">Fakultas Pertanian</option>
    <option value="6">Fakultas Ilmu Komputer</option>
    <option value="7">Fakultas Keperawatan</option>
    <option value="8">Akademi Sekretari Manajemen Indonesia Klabat</option>
  </select>
</div>
<div class="mb-3">
  <label for="pStudy">Program of Study</label>
  <select class="form-select mt-2" id="pStudy" name="pStudy">
    <option value="0" selected>--SELECT PROGRAM OF STUDY --</option>
  </select>
</div>





<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

Answer 1

这是否解决了您的问题？您应该首先检查 faculties 对象中是否存在所选值

const faculties = {
  1: ["Magister Manajemen", "Magister Teologi"],
  2: ["Ilmu Filsafat"],
  3: ["Pendidikan Agama", "Pendidikan Bahasa Inggris", "Pendidikan Ekonomi", "Pendidikan Luar Sekolah"],
  4: ["Akuntansi", "Manejemen"],
  5: ["Agroteknologi"],
  6: ["Informatika", "Sistem Informasi"],
  7: ["Profesi Ners", "Keperawatan"],
  8: ["Sekretari D3"],
};

let facultySelection = document.querySelector("#faculty");
let prodiSelection = document.querySelector("#pStudy");

facultySelection.addEventListener("change", (event) => {
  const val = event.target.value;

  if ( !val || !faculties[val] ) {
    pStudy.innerHTML = `<option value="0">-- SELECT PROGRAM STUDY --</option>`;
    return;
  } 

  let prodies = faculties[val];
  pStudy.innerHTML = prodies.map((p) => `<option value="${p}">${p}</option>`).join("");
});

<div class="mb-3">
  <label for="faculty">Faculty</label>
  <select class="form-select mt-2" id="faculty" name="faculty">
    <option value="0" selected="selected">--SELECT FACULTY --</option>
    <option value="1">Pascasarjana</option>
    <option value="2">Fakultas Filsafat</option>
    <option value="3">Fakultas Keguruan dan Ilmu Pendidikan</option>
    <option value="4">Fakultas Ekonomi dan Bisnis</option>
    <option value="5">Fakultas Pertanian</option>
    <option value="6">Fakultas Ilmu Komputer</option>
    <option value="7">Fakultas Keperawatan</option>
    <option value="8">Akademi Sekretari Manajemen Indonesia Klabat</option>
  </select>
</div>
<div class="mb-3">
  <label for="pStudy">Program of Study</label>
  <select class="form-select mt-2" id="pStudy" name="pStudy">
    <option value="0" selected>--SELECT PROGRAM OF STUDY --</option>
  </select>
</div>





<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

在默认依赖项时重置 select 选项

reset select option while dependencies is default

html

javascript

css

pure-js