选择下拉值在更改后消失

Question

我有这个代码

 function OnSelectedIndexChange() { if (stsNikahWp == "2") { document.getElementById("kdNegaraSuami").options.length = 0; $("#kdNegaraSuami").attr("disabled", true); } else if (stsNikahWp == "1") { $('#kdNegaraSuami').removeAttr('disabled'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group mb-0"> <label for="" class="mb-0 blue-dark-text">Status Pernikahan <font color="red">*</font></label> <div class="input-group border-bottom"> <select class="form-control" id="stsNikahWp" onChange="OnSelectedIndexChange()"> <option></option> <option value="1">Kawin</option> <option value="2">Tidak Kawin</option> </select> </div> </div> <div class="form-group mb-0"> <label for="" class="mb-0 blue-dark-text">Kewarganegaraan Suami</label> <div class="input-group border-bottom"> <select disabled class="form-control" id="kdNegaraSuami" style="border:0px;" onChange="OnSelectedIndexChange()"></select> </div> </div>

当我在“stsNikahWp”下拉列表中选择值 1 时，此“kdNegaraSuami”下拉列表将可用。 但是，当我选择值 2 时，“kdNegaraSuami”下拉列表将再次禁用。 “kdNegaraSuami”下拉列表中的值从数据库中获取。

首先，我在“stsNikahWp”下拉列表中选择值 1。 然后我在“kdNegaraSuami”下拉列表中选择值。 然后我尝试在“stsNikahWp”下拉列表中选择值 2。 “kdNegaraSuami”下拉列表中的值消失了，它再次变为禁用状态。 我在“stsNikahWp”下拉列表中选择了值 1，“kdNegaraSuami”下拉列表可以，但下拉列表中的所有值都消失了。 请帮我。 抱歉英语不好。

Answer 1

您可以保留<option>元素并将值设置为空选项

我修改了 html 以从 onChange 传入this.value

 function OnSelectedIndexChange(value) { if (value == "2") { $("#kdNegaraSuami").val('').attr("disabled", true); } else { $('#kdNegaraSuami').removeAttr('disabled'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group mb-0"> <label for="" class="mb-0 blue-dark-text">Status Pernikahan <font color="red">*</font></label> <div class="input-group border-bottom"> <select class="form-control" id="stsNikahWp" onChange="OnSelectedIndexChange(this.value)"> <option></option> <option value="1">Kawin</option> <option value="2">Tidak Kawin</option> </select> </div> </div> <div class="form-group mb-0"> <label for="" class="mb-0 blue-dark-text">Kewarganegaraan Suami</label> <div class="input-group border-bottom"> <select disabled class="form-control" id="kdNegaraSuami" style="border:0px;" onChange="OnSelectedIndexChange()"> <option value=""></option> <option value="1">One</option> <option value="2">Two</option> </select> </div> </div>