如何清除更改下拉列表中先前附加的数据？

时间：2019-06-24 06:13:57

标签： javascript jquery html twitter-bootstrap

我有一个下拉列表，并在更改上添加了div。这对我有用，但问题是，我要追加div，并且当我更改下拉列表时，就会显示上一个div。我必须删除上一个div并根据下拉值显示当前div。

我尝试了以下代码。我尝试使用$(event.target).closest('.row').html("");删除最后一个追加，但是它删除了我所有的div，包括下拉列表。

$('.pp_fileStatus').on('change', function(event) {
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});
<div class="row">
  <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

4 个答案:

答案 0 :(得分：0)

$('.pp_fileStatus').on('change', function(event) {
$(".input-wrapper").remove();
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});
<div class="row">
  <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

答案 1 :(得分：0)

$('.pp_fileStatus').on('change', function(event) {
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(".inputappenddiv").html('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(".inputappenddiv").html('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(".inputappenddiv").html('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(".inputappenddiv").html('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});
<div class="row">
  <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>
  <div class="inputappenddiv">
    
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

答案 2 :(得分：0)

您应该删除行中的孩子，但您的情况下第一个孩子除外。

$('.pp_fileStatus').on('change', function(event) {
  $(event.target).closest('.row').children().not('.select-div').remove();
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});
<div class="row">
  <div class="select-div col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 ">
    <div class="form-group">
      <select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus">
        <option value="" disabled selected>File Status</option>
        <option value="1">Status1</option>
        <option value="2">Status2</option>
        <option value="3">Status3</option>
        <option value="4">Status4</option>
        <option value="5">Status5</option>
        <option value="6">Status6</option>
        <option value="7">Status7</option>
        <option value="8">Status8</option>
        <option value="9">Status9</option>
      </select>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

答案 3 :(得分：0)

// Mark what ever you want to do empty here.
// before every change event occurs it will empty your div first then it will append the new one.
$('.pp_fileStatus').on('change', function(event) {
  if (($('.pp_fileStatus').val() == '1') || ($('.pp_fileStatus').val() == '3') || ($('.pp_fileStatus').val() == '6')) {
    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');

  } else if (($('.pp_fileStatus').val() == '2') || ($('.pp_fileStatus').val() == '4') || ($('.pp_fileStatus').val() == '5')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '8') || ($('.pp_fileStatus').val() == '9')) {

    $(event.target).closest('.row').append('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="Reason[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="form-group"> <label>Amt</label><input type="text" name="reasonAmt[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});

希望这对您有帮助... !!

相关问题
最新问题