基于jQuery中选择的先前表单隐藏选项

Question

我有 2 个选择表格。第一个是选择“状态”，第二个是选择“部门”。第二个表单的选项基于第一个选择。我在第一个选择中有 3 个选项，这将导致第二个选择中的每个 3 个选项，保存为数组。这是代码

HTML

<div class="row">

                   <label class="col-md-3" style="margin-top:30px; margin-left: 30px; color: #0b0b0b">Status</label>

                   <div class="col-md-6">

                       <select id="status" name="status" class="form-control">

                           <option value="">Pilih Status</option>

                           <option value="Karyawan Kontrak">Karyawan Kontrak</option>

                           <option value="Karyawan Magang">Karyawan Magang</option>

                           <option value="Karyawan Pertamina">Karyawan Pertamina</option>

                       </select>

                   </div>

               </div>

               <div class="row" id="row_bagian" style="display: none">

                   <label class="col-md-3" style="margin-top:30px; margin-left: 30px; color: #0b0b0b">Fungsi / Bagian</label>

                   <div class="col-md-6" id="select_bagian">

                    {{-- the second select-option here --}}

                   </div>

               </div>

Javascript/Jquery

$(document).ready(function() {

           $('#status').on("change", function(){

           $("#row_bagian").show();

           var myDiv = document.getElementById("select_bagian");

           //create array of each status

           var magang = ["A", "B", "C"];

           var kontrak = ["D", "E", "F"];

           var pertamina = ["G", "H", "I"];

问题是，我在第一个表单中选择了“Karyawan Kontrak”，然后会显示包含 kontrak 数组的第二个表单。在同一页，我将“Karyawan Kontrak”更改为“Karyawan Magang”。包含 magang 数组的第二种形式显示，但 kontrak 数组的前第二种形式仍然显示，即使我已经在 javascript 中通过 id 隐藏了它，但它没有用。

请帮助我如何隐藏它

链接 JSFiddle https://jsfiddle.net/npa6o9km/

Answer 1

请检查我的解决方案，$(document).ready(function() {var selectList = document.createElement("select");&nbsp; &nbsp; selectList.setAttribute("id", "bagian");&nbsp; &nbsp; selectList.setAttribute("name", "bagian");&nbsp; &nbsp; selectList.setAttribute("class", "form-control");&nbsp; &nbsp; var myDiv = document.getElementById("select_bagian");&nbsp; &nbsp; myDiv.appendChild(selectList);&nbsp; $('#status').on("change", function() {&nbsp; &nbsp; $("#row_bagian").show();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //create array of each status&nbsp; &nbsp; var magang = ["A", "B", "C"];&nbsp; &nbsp; var kontrak = ["D", "E", "F"];&nbsp; &nbsp; var pertamina = ["G", "H", "I"];&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if ($(this).val() === "Karyawan Magang") {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; for (var i = 0; i < magang.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; var option = document.createElement("option");&nbsp; &nbsp; &nbsp; &nbsp; option.setAttribute("value", magang[i]);&nbsp; &nbsp; &nbsp; &nbsp; option.setAttribute("id", "option_magang");&nbsp; &nbsp; &nbsp; &nbsp; option.text = magang[i];&nbsp; &nbsp; &nbsp; &nbsp; $("#bagian option[id='option_kontrak']").remove();&nbsp; &nbsp; &nbsp; &nbsp; $("#bagian option[id='option_pertamina']").remove();&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; selectList.appendChild(option);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else if ($(this).val() === "Karyawan Kontrak") {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; for (var k = 0; k < kontrak.length; k++) {&nbsp; &nbsp; &nbsp; &nbsp; var option = document.createElement("option");&nbsp; &nbsp; &nbsp; &nbsp; option.setAttribute("value", kontrak[k]);&nbsp; &nbsp; &nbsp; &nbsp; option.setAttribute("id", "option_kontrak");&nbsp; &nbsp; &nbsp; &nbsp; option.text = kontrak[k];&nbsp; &nbsp; &nbsp; &nbsp; $("#bagian option[id='option_magang']").remove();&nbsp; &nbsp; &nbsp; &nbsp; $("#bagian option[id='option_pertamina']").remove();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; selectList.appendChild(option);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else if ($(this).val() === "Karyawan Pertamina") {&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; for (var j = 0; j < pertamina.length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; var option = document.createElement("option");&nbsp; &nbsp; &nbsp; &nbsp; option.setAttribute("value", pertamina[j]);&nbsp; &nbsp; &nbsp; &nbsp; option.setAttribute("id", "option_pertamina");&nbsp; &nbsp; &nbsp; &nbsp; option.text = pertamina[j];&nbsp; &nbsp; &nbsp; &nbsp; $("#bagian option[id='option_kontrak']").remove();&nbsp; &nbsp; &nbsp; &nbsp; $("#bagian option[id='option_magang']").remove();&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; selectList.appendChild(option);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="row">&nbsp; <label class="col-md-3" style="margin-top:30px; margin-left: 30px; color: #0b0b0b">Status</label>&nbsp; <div class="col-md-6">&nbsp; &nbsp; <select id="status" name="status" class="form-control">&nbsp; &nbsp; &nbsp; <option value="">Pilih Status</option>&nbsp; &nbsp; &nbsp; <option value="Karyawan Kontrak">Karyawan Kontrak</option>&nbsp; &nbsp; &nbsp; <option value="Karyawan Magang">Karyawan Magang</option>&nbsp; &nbsp; &nbsp; <option value="Karyawan Pertamina">Karyawan Pertamina</option>&nbsp; &nbsp; </select>&nbsp; </div></div><div class="row" id="row_bagian" style="display: none">&nbsp; <label class="col-md-3" style="margin-top:30px; margin-left: 30px; color: #0b0b0b">Fungsi / Bagian</label>&nbsp; <div class="col-md-6" id="select_bagian">&nbsp; </div></div>您每次都在 onChange 事件中创建新的选项元素。而不是只创建一次元素并在 onChange 事件中更新选项。

Answer 2

您无需隐藏项目，只需清空下拉框即可。selectList.empty();希望它可以提供帮助。