更改后选择下拉值消失答案

【问题标题】：select dropdown value is gone after on change更改后选择下拉值消失
【发布时间】：2020-09-15 04:54:17
【问题描述】：

我有这个代码

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”下拉列表可以，但下拉列表中的所有值都消失了。请帮我。抱歉英语不好。

【问题讨论】：

Heing W 您的代码完全符合您的描述。但请提及您想要什么，以便我们提供帮助。比如你希望在什么情况下禁用它，什么时候不禁用？
你需要if (stsNikahWp.value == "2")； stsNikahWp 是 <select> 元素本身。
您好，您使用了document.getElementById("kdNegaraSuami").options.length = 0;，它将从第二个下拉列表中删除选项..

标签： javascript html jquery select dropdown

【解决方案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>

【讨论】：