Tengo un botón Agregar más. Una vez que el usuario hace clic en él, aparecerá el menú desplegable Seleccionar, que es dinámico.

Ahora, mi problema es, después de mostrar el desplegable Seleccionar, hay un desplegamiento Seleccionar que se llama como status. Si elige el desplegamiento de la selección de estado, luego se mostrará la entrada de entrada, se mostrará. Pero mostrando solo una vez. Si hago clic en Agregar más botón nuevamente y elegir entre el desplegamiento de estado, entonces está ocultando el primero. Necesito mostrar ambos.

Mi salida esperada es,

id 2 | first dropdown | second dropdown | input field
id 3 | first dropdown | second dropdown | input field
id 4 | first dropdown | second dropdown | input field
$(document).ready(function() {

  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".dynamicform"); //Fields wrapper

  var add_button = $(".click_partner"); //Add button ID

  var x = 1; //initlal text box count
  a = 1;
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment

      a++;
      //$("input[id^=medication_name]").focus();
      $(wrapper).append('<div class="clearfix"></div><div class=" custom_fields medication_info" data-id="' + inner(a, 2) + '"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="label" id="unique">ID ' + x + ':</div></div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank Three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div>  <div class="i-imgset remove_field"><img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).find('.click_partner').closest('.custom_fields').remove();
    x++;
  });



  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.medication_info').remove();
    x--;
  });

  // increment==============================================
  function inner(k, width, t) {
    t = t || '0';
    k = k + '';
    /* 
    		  return n.length >= ? n : new Array(w widthidth - n.length + 1).join(z) + n; */
    return k.length >= width ? k : new Array(width - k.length + 1).join(t) + k;
  }

});


$(document).on('change', '.pp_fileStatus', function(event) {
  //alert($(this).val());
  $(".input-wrapper").remove();
  if (($('.pp_fileStatus').val() == '1')) {
    $(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')) {
    $(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 {
    $(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>Time</label><input type="text" name="time[]"  class="form-control"></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>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});
.i-imgset {
  width: 30px;
}

.i-imgset img {
  width: 100%;
}

.bankLink {
  position: absolute;
  top: -24px;
  font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="click_partner"> <input type="button" name="parner" value="Add More"></div>
  <div class="dynamicform">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
0
questionbank 30 jun. 2019 a las 16:24

1 respuesta

La mejor respuesta

Su problema está en este controlador de eventos:

$(document).on('change', '.pp_fileStatus', function(event) {

No se refiere a los elementos actuales, sino a los elementos globales que tienen algún atributo. Por ejemplo:

$(".input-wrapper").remove();

La línea anterior debe convertirse en:

 $(this).closest('.row').find('div.input-wrapper').remove();

...y así:

var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".dynamicform"); //Fields wrapper

var add_button = $(".click_partner"); //Add button ID

var x = 1; //initlal text box count
a = 1;
$(add_button).click(function (e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
        x++; //text box increment

        a++;
        //$("input[id^=medication_name]").focus();
        $(wrapper).append('<div class="clearfix"></div><div class=" custom_fields medication_info" data-id="' + inner(a, 2) + '"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="label" id="unique">ID ' + x + ':</div></div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank Three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div>  <div class="i-imgset remove_field"><img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
    }
});

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
    e.preventDefault();
    $(this).find('.click_partner').closest('.custom_fields').remove();
    x++;
});


$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.medication_info').remove();
    x--;
});

// increment==============================================
function inner(k, width, t) {
    t = t || '0';
    k = k + '';
    /*
     return n.length >= ? n : new Array(w widthidth - n.length + 1).join(z) + n; */
    return k.length >= width ? k : new Array(width - k.length + 1).join(t) + k;
}
$(document).on('change', '.pp_fileStatus', function (event) {
$(this).closest('.row').find('div.input-wrapper').remove();
if (($(this).val() == '1')) {
    $(this).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 (($(this).val() == '2')) {
    $(this).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 {
    $(this).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>Time</label><input type="text" name="time[]"  class="form-control"></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>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

}
});
.i-imgset {
    width: 30px;
}

.i-imgset img {
    width: 100%;
}

.bankLink {
    position: absolute;
    top: -24px;
    font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">


<div class="container">
    <div class="click_partner"><input type="button" name="parner" value="Add More"></div>
    <div class="dynamicform">
    </div>
</div>
1
gaetanoM 30 jun. 2019 a las 13:52