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

    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();

希望它可以提供帮助。