Скрыть параметр на основе выбранной предыдущей формы в 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, показала, но предыдущие 2 формы массива kontrak все еще показывают, даже если я уже скрыл это по id в javascript, но это не сработало.

Пожалуйста, помогите мне, как скрыть это

Ссылка 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>

Каждый раз вы создаете новый элемент option в событии onChange. Вместо этого создайте элемент только один раз и обновите в нем опции onChange.

Answer 2

Вам не нужно прятать предметы, просто очистите раскрывающийся список.

selectList.empty();

Надежда это может помочь.