如何解决选择下拉值在更改后消失了
我有这个代码
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” drowpdown将能够执行。但是,当我选择值2时,“ kdNegaraSuami” drowpdown将再次变为禁用状态。 drowpdown中的“ kdNegaraSuami”值是从数据库中获取的。
首先,我在“ stsNikahWp”下拉列表中选择值1。然后在“ kdNegaraSuami” drowpdown中选择值。然后尝试在“ stsNikahWp”下拉列表中选择值2。 “ kdNegaraSuami” drowpdown中的值不存在,并且再次变为禁用状态。我在“ stsNikahWp”下拉列表中选择了值1,“ kdNegaraSuami” drowpdown可以,但是下拉列表中的所有值都消失了。请帮我。对不起,英语不好。
解决方法
您可以将<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。