Блог

Главная - Вопросы по программированию - выберите выпадающее значение исчезло после изменения

выберите выпадающее значение исчезло после изменения

#javascript #html #jquery #select #dropdown

#javascript #HTML #jquery #выберите #выпадающий

Вопрос:

У меня есть этот код

 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>

это «kdNegaraSuami» отключится, когда я выберу значение 1 в раскрывающемся списке «stsNikahWp». но, когда я выбираю значение 2, выпадающее значение «kdNegaraSuami» снова станет отключенным.
значение в раскрывающемся списке «kdNegaraSuami» получено из базы данных.

сначала я выбираю значение 1 в выпадающем списке «stsNikahWp». затем я выбираю значение в раскрывающемся списке «kdNegaraSuami». затем я пытаюсь выбрать значение 2 в раскрывающемся списке «stsNikahWp». значение в выпадающем списке «kdNegaraSuami» исчезло, и оно снова стало недоступным. Я выбираю значение 1 в выпадающем списке «stsNikahWp», вывод «kdNegaraSuami» возможен, но все значения в выпадающем списке исчезли. пожалуйста, помогите мне. Извините за плохой английский.

Комментарии:

1. Heing W Ваш код говорит именно то, что вы описываете. Но, пожалуйста, укажите, что вы хотите, чтобы мы могли помочь. например, в каких условиях вы хотите, чтобы оно было отключено, а когда нет?

2. Вам нужно if (stsNikahWp.value == "2") вместо этого; stsNikahWp это <select> сам элемент.

3. Привет, у вас есть use document.getElementById("kdNegaraSuami").options.length = 0; , который удалит параметры из второго выпадающего списка..

Ответ №1:

Вы могли бы оставить <option> элементы на месте и установить значение пустой опции

Я изменил html для передачи this.value из 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>