基于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"];

           //create select lis
           var selectList = document.createElement("select");
           selectList.setAttribute("id", "bagian");
           selectList.setAttribute("name", "bagian");
           selectList.setAttribute("class", "form-control");
           myDiv.appendChild(selectList);

           if ($(this).val() === "Karyawan Magang"){
               $("#option_kontrak").hide();
               $("#option_pertamina").hide();
               for (var i = 0 ; i < magang.length; i++){
                   var option = document.createElement("option");
                   option.setAttribute("value", magang[i]);
                   option.setAttribute("id", "option_magang");
                   option.text = magang[i];
                   selectList.appendChild(option);
               }
           }
           else if ($(this).val() === "Karyawan Kontrak") {
               $("#option_magang").hide();
               $("#option_pertamina").hide();
               for (var k = 0; k < kontrak.length; k++) {
                   var option = document.createElement("option");
                   option.setAttribute("value", kontrak[k]);
                   option.setAttribute("id", "option_kontrak");
                   option.text = kontrak[k];
                   selectList.appendChild(option);

               }
           }
           else if($(this).val() === "Karyawan Pertamina") {
               $("#option_magang").hide();
               $("#option_kontrak").hide();
               for (var j = 0; j < pertamina.length; j++) {
                   var option = document.createElement("option");
                   option.setAttribute("value", pertamina[j]);
                   option.setAttribute("id", "option_pertamina");
                   option.text = pertamina[j];
                   selectList.appendChild(option);
                   $("#option_kontrak").hide();
                   $("#option_magang").hide();
               }
           }
        });

问题是，我在第一个表单中选择了“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");
    selectList.setAttribute("id", "bagian");
    selectList.setAttribute("name", "bagian");
    selectList.setAttribute("class", "form-control");
    var myDiv = document.getElementById("select_bagian");
    myDiv.appendChild(selectList);
  $('#status').on("change", function() {
    $("#row_bagian").show();
    

    //create array of each status
    var magang = ["A", "B", "C"];
    var kontrak = ["D", "E", "F"];
    var pertamina = ["G", "H", "I"];

 
    

    if ($(this).val() === "Karyawan Magang") {
  
      for (var i = 0; i < magang.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", magang[i]);
        option.setAttribute("id", "option_magang");
        option.text = magang[i];
      	$("#bagian option[id='option_kontrak']").remove();
        $("#bagian option[id='option_pertamina']").remove();
       
        selectList.appendChild(option);
        
      }
    } else if ($(this).val() === "Karyawan Kontrak") {
  
      for (var k = 0; k < kontrak.length; k++) {
        var option = document.createElement("option");
        option.setAttribute("value", kontrak[k]);
        option.setAttribute("id", "option_kontrak");
        option.text = kontrak[k];
       	$("#bagian option[id='option_magang']").remove();
        $("#bagian option[id='option_pertamina']").remove();
      
        
        selectList.appendChild(option);
     

      }
    } else if ($(this).val() === "Karyawan Pertamina") {
     
      for (var j = 0; j < pertamina.length; j++) {
        var option = document.createElement("option");
        option.setAttribute("value", pertamina[j]);
        option.setAttribute("id", "option_pertamina");
        option.text = pertamina[j];
       	$("#bagian option[id='option_kontrak']").remove();
        $("#bagian option[id='option_magang']").remove();
        
        
        selectList.appendChild(option);
        
      
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">

  </div>
</div>

您每次都在 onChange 事件中创建新的选项元素。而不是只创建一次元素并在 onChange 事件中更新选项。

Answer 2

您无需隐藏项目，只需清空下拉框即可。

selectList.empty();

希望it可以提供帮助。