选择下拉菜单后，动态输入字段无法正确显示

Posted 2023-03-06

【中文标题】选择下拉菜单后，动态输入字段无法正确显示

【英文标题】：Dynamic input fields are not displaying proper after selecting the dropdown

【发布时间】：2019-06-30 13:24:42

【问题描述】：

我有一个添加更多按钮。一旦用户点击它，它就会显示动态的选择下拉菜单。

现在我的问题是，在显示选择下拉菜单后，有一个选择下拉菜单，称为status。如果您从状态选择下拉列表中进行选择，则将显示根据选项输入字段。但它只显示一次。如果我再次单击添加更多按钮并从状态下拉列表中进行选择，那么它将隐藏第一个。我需要同时显示两者。

我的预期输出是，

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" > </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>

链接到JsFiddle

【参考方案1】：

您的问题出在此事件处理程序中：

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

您不是指当前元素，而是指具有某些属性的全局元素。例如：

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

上一行需要变成：

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

...等等：

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" > </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>

【讨论】：

抱歉回复晚了，请给我一些时间检查您的答案

是的，我肯定会接受它并为你投票，但在 4 分钟后，因为我收到了来自 SO 的警告。