Question

我有问题。我使用jquery这样在php中进行动态输入：

$(document).ready(function() {
        var count = 0;
        $("#add_btn").click(function(){
            count += 1;
            $('#container').append(
                 '<tr class="records">'
                     + '<td ><div id="'+count+'">' + count + '</div></td>'
                     + '<td><select class="form-control form-control-sm" name="site' + count + '" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'

                     + '<td><input name="codeitem' + count + '" type="text"></td>'
                     + '<td><a class="remove_item" href="#" >Delete</a>'
                     + '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td>'
                 + '</tr>'
                );
            });

            $(".remove_item").live('click', function (ev) {
            if (ev.type == 'click') {
            $(this).parents(".records").fadeOut();
                    $(this).parents(".records").remove();
        }
        });
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="id_form" action="save.php" method="post">
  <table>
    <tr>
      <td>
        <input type="button" name="add_btn" value="Add" id="add_btn">
      </td>
    </tr>
    <tr>
      <td>No</td>
      <td>Item</td>
      <td>Code Item</td>
      <td>&nbsp;</td>
    </tr>
    <tbody id="container">
      <!-- nanti rows nya muncul di sini -->
    </tbody>
    <tr>
      <td>
        <input type="submit" name=submit value="Save">
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

条件：如果我在组合选择菜单中选择了佳能，则在输入codeitem时显示该项目的代码（在另一种情况下，我使用PHP从SQL表中获取codeitem。

在第一行输入字段中，这是成功的..但是，如果我想通过单击“添加按钮”来添加更多输入字段以输入另一个项目（在第二行输入字段中），为什么先输入codeitem更改代码项，而不是在第二行输入代码项？

如何在这种情况下输入动态项目？

Answer 1

如果您不使用旧版代码库，则使用最新版本的Jquery是一种麻烦。

'<td ><div id="'+count+'">' + count + '</div></td>'，您不能多次使用相同的id，因此请将其更改为class。
'<td><input name="codeitem' + count + '" type="text"></td>'，应固定输入字段名称，以便在表单提交后在您的php脚本中对其进行处理，但由于需要获取多个值，因此请将其设置为数组codeitem[]
rows[]输入字段的用途是什么？
要在更改组合选择菜单上动态输入codeitem，必须使用“ Ajax”从数据库中获取所选组合菜单的'codeitem'值。

选中此jsfiddle。

$(document).ready(function() {

    $("#add_btn").click(function(){
        let count = $('tr.records').length+1;
        $('#container').append(
             '<tr class="records">'
                 + '<td ><div class="count">' + count + '</div></td>'
                 + '<td><select class="site form-control form-control-sm" name="site[]" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'

                 + '<td><input class="codeitem" name="codeitem[]" type="text"></td>'
                 + '<td><a class="remove_item" href="#" >Delete</a>'
                 + '<input class="rows" name="rows[]" value="'+ count +'" type="hidden"></td>'
             + '</tr>'
            );
        });

$(document).on('click',".remove_item", function (ev) {

  $(this).parents(".records").fadeOut();
  $(this).parents(".records").remove();

  //Re-arrange the Row Serial No

  $('tr.records div.count').each(function(index) {
    $(this).text(index+1)
  });
});

$(document).on('change',".site", function (ev) {

  let site = $(this).val();
        let current = $(this).parents(".records");

  if(site!=''){
    //make an ajax call to get the corresponding CodeItem of the selected site
    /* $.ajax({
      url: "/yoururl",
      data:{"id":site},
      success: function(result){
        $(current).find('.codeitem').val(result);
      }
    }); */

  }else{
    $(current).find('.codeitem').val('');
  }


}); 
})

如何添加动态更改输入值

1 个答案: