如何添加输入字段并动态选择？

debugcn 发表于 Dev

德雷克斯

我有一个输入字段和一个带有 MySQL 值的选择选项。如何动态添加更多输入字段并使用 MySQL 值进行选择？我试图解决这个问题，但结果很糟糕：

我想用它来更新我的数据库，我可以用它更新多个数据，但删除以前的字段按钮不起作用，最后有 +1 添加更多按钮。我怎么解决这个问题？我正在尝试使用 append 方法，但它不适用于 MySQL 数据。

索引.php

<div class="form-group add-field">
  <div class="partner">    
    <table>
      <tr>
        <td>
          <select name="partnerSelect[]" id="partnerSelect" class="form-control">
          <option disabled selected value> -- select an option -- </option>
          <?php                                       
            while($row = $partnerResult -> fetch_array()) {
          ?>
          <option value="<?php echo $row['partner_id'];?>"><?php echo $row['partner'];?></option>
          <?php
            }
          ?>
          </select>  
        </td>
        <td><input type="text" placeholder="Enter description" name="description[]" id="description" class="form-control" /></td>
      </tr>
    </table>
  </div>
  <div class="btn btn-warning add-more"><span>+ Add More</span></div>
</div>

<script>
$(document).ready(function(){

    var data_fo = $('.add-field').html();
    var sd = '<div class="btn btn-danger remove-add-more">Remove</div>';
    var data_combine = data_fo.concat(sd);
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $(".partner"); //Fields wrapper
    var add_button = $(".add-more"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
      e.preventDefault();
      if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append(data_combine); //add input box
        //$(wrapper).append('<div class="remove-add-more">Remove</div>')
      }
      // console.log(data_fo);
    });

    $(wrapper).on("click",".remove-add-more", function(e){ //user click on remove text
        e.preventDefault();
        $(this).prev('.partner').remove();
        //$(".add-more").prev('.user').remove(); It's remove all the buttons and inputs
        $(this).remove();
        x--;
    });
 });
</script>

酱汁

你很接近，只是有几件事有点不对劲。我让你的代码保持相同的格式，但稍微清理了一下。如果您有任何问题，请告诉我。

$(document).ready(function(){

    var data_fo = $('.partner').html();
    var sd = '<div class="btn btn-danger remove-add-more">Remove</div>';
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $(".partners"); //Fields wrapper
    var add_button = $(".add-more"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
      e.preventDefault();
      if(x < max_fields){ //max input box allowed
        x++; //text box increment
        var partnerClone = $('.partner').first().clone();
        $(sd).appendTo(partnerClone);
        $(wrapper).append(partnerClone);
      }
    });

    $(wrapper).on("click",".remove-add-more", function(e){ //user click on remove text
        e.preventDefault();
        $(this).parent('.partner').remove();
        $(this).remove();
        x--;
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group add-field">
  <div class="partners">  
    <div class="partner">
      <table>
        <tr>
          <td>
            <select name="partnerSelect[]" id="partnerSelect" class="form-control">
            <option disabled selected value> -- select an option -- </option>
            <?php                                       
              while($row = $partnerResult -> fetch_array()) {
            ?>
            <option value="<?php echo $row['partner_id'];?>"><?php echo $row['partner'];?></option>
            <?php
              }
            ?>
            </select>  
          </td>
          <td><input type="text" placeholder="Enter description" name="description[]" id="description" class="form-control" /></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="btn btn-warning add-more"><span>+ Add More</span></div>
</div>

我把它放在一个片段中，这样你就可以在这里运行它。但是您可以返回并像以前一样将 Jquery 放入脚本标记中

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。