Question

我有一个html选择框，我将根据先前选择框的选择附加新选项。在添加新选项之前，我需要清空选择框，以便仅显示所需的选项。

该附件工作正常并且选项可以更改，并且可以从“ 2nd_incident”选择框中进行选择，但是，当我合并.empty（）时，这些选项仍会根据我的需要进行更改，但是当您实际尝试从中选择它们时选择框中的值保持不变。

将值登录到控制台可确认该值已更改，但外观没有变化。

我也尝试用.html（）代替.empty（）和.append（），但这也有相同的问题。

$("#load_section3").change(function() {

  var first_incident = document.getElementById('1st_incident').value;
  var second_incident = document.getElementById('2nd_incident');

  console.log(second_incident.value);

  if (first_incident == 1) {

    //remove na and input options into next select box

    $('#2nd_incident').empty().end();

    $('#2nd_incident').append('<option > Please Select </option>' +
      '<option > something1 </option>' +
      '<option > something2 </option>' +
      '<option > something3 </option>' +
      '<option > something3 </option>');



  } else if (first_incident == 2) {

    $('#2nd_incident').empty().append('<option> Please Select </option>' +
      '<option> somethings1 </option>' +
      '<option> somethings2 </option>' +
      '<option> somethings3  </option>');

  } else {

    $('#2nd_incident').empty();
    $('#2nd_incident').append('<option> NA </option>');

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load_section3">
  <select class="inputs" id="1st_incident">
    <option> 1 </option>
    <option> 2 </option>
    <option> 3 </option>

  </select>

  <select class="inputs" id="2nd_incident">
    <option value="Test">NA</option>
  </select>
</div>

任何帮助都会很感激，因为我觉得自己已经使用了几个星期了。

Answer 1

浏览完代码后，我发现每次您在selectbox中选择值时，它都会检查条件，并根据条件更新选择框。因此，这里可能是您解决问题的方法。您只应在第一个选择框的更改事件中将值填充到第二个选择框

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="load_section3">
  <select class="inputs" id="1st_incident">
    <option> 1 </option>
    <option> 2 </option>
    <option> 3 </option>

  </select>

  <select class="inputs" id="2nd_incident">
    <option value="Test">NA</option>
  </select>
</div>
<script>

  
   $("#1st_incident").change(function(){
      if (this.value == 1) {

    //remove na and input options into next select box

    $('#2nd_incident').empty().end();

    $('#2nd_incident').append('<option > Please Select </option>' +
      '<option > something1 </option>' +
      '<option > something2 </option>' +
      '<option > something3 </option>' +
      '<option > something3 </option>');



  } else if (this.value == 2) {

    $('#2nd_incident').empty().append('<option> Please Select </option>' +
      '<option> somethings1 </option>' +
      '<option> somethings2 </option>' +
      '<option> somethings3  </option>');

  } else {

    $('#2nd_incident').empty();
    $('#2nd_incident').append('<option> NA </option>');

  }
    });

</script>
<body>
<html>

选择框值保持不变

1 个答案: