reset select option while dependencies is default-CodePudding

I use pure js. I'am having difficulty for reseting the select box to default. As you can see on the code below I want to make two select depend on each other. If I choose this it will show only this, but when reseting when I choose the first select for option value = 0, I want the second select to be reset into default also.

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

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

CodePudding user response：

Does this solve your problem? You should check that selected value exists in faculties object before anything else

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

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