CODEWITHSUNDEEP
javascripthtmljqueryselectdropdown
Rossa Hening W
Rossa Hening W

Reputation: 1

select dropdown value is gone after on change

I have this code

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>

this "kdNegaraSuami" drowpdown will able when I select value 1 in "stsNikahWp" dropdown. but, when I select value 2, the "kdNegaraSuami" drowpdown will become disable again. the value in "kdNegaraSuami" drowpdown got from database.

first, I select value 1 in "stsNikahWp" dropdown. then I select value in "kdNegaraSuami" drowpdown. then I try to select value 2 in "stsNikahWp" dropdown. the value in "kdNegaraSuami" drowpdown is gone and it become disable again. I select value 1 in "stsNikahWp" dropdown, the "kdNegaraSuami" drowpdown is able but all the value in dropdown is gone. please help me. Sorry for bad english.

Upvotes: 0

Views: 911

Answers (1)

charlietfl
charlietfl

Reputation: 171690

You could leave the <option> elements in place and set value to empty option

I modified html to pass in this.value from the onChange

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>

Upvotes: 2

Related Questions