我使用纯js。我很难将选择框重置为默认值。正如您在下面的代码中看到的那样,我想让两个选择相互依赖。如果我选择这个,它只会显示这个,但是当我为选项值 = 0 选择第一个选择时重置时,我希望第二个选择也重置为默认值。
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>