我有 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/
最佳答案
请检查我的解决方案,
$(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 事件中更新选项。
关于javascript - 根据 jquery 中选定的先前表单隐藏选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61495016/