Select2 函数在动态形式下不起作用

时间:2021-02-04 06:24:13

标签: javascript jquery ajax

Select2 库在其他 HTML 表单中运行良好,但在此表单中不起作用 我想使用 select2 过滤器在我的动态表单中实现搜索选项,但它不起作用请帮助...

头部标签

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<link rel="stylesheet" type="text/css" href="select2/dist/css/select2.min.css">  
         <script src="jquery-3.3.1.min.js" type="text/javascript"></script>

    <!-- Select2 JS -->
    <script src="select2/dist/js/select2.min.js" type="text/javascript"></script>

在靠近第一个选择标签的这个表单中我想要选择2

     <div>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Firm Name</th>
       <th>Gross</th>
       <th>Tax</th>
       <th>Net</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
             </tr>
     </table>
     <div align="center">
          <input type="submit" name="submit" class="btn btn-info" value="Submit" />
      
        </div>
    </div>
   </form>
 

<script>
$(document).ready(function(){
 $(document).on('click', '.add', function(){
  var html = '';
 html += '<tr>';
 html += `<td><select type="text" name="head[]" class="inst_amount"><option value="">Select Name</option><?php $sql=mysqli_query($con,"SELECT * FROM bank order by name");
while($row=mysqli_fetch_array($sql))
{?><option value="<?php echo htmlentities($row['id']);?>"><?php echo htmlentities($row['Name']);?></option><?php }?></select></td>`;
  html += '<td><input type="text" name="invoice_no[]" class="form-control amount1" /></td>';     
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 });
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
    var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(result)
     
    { 
      window.location.href="print.php?id="+result;
     }
    }
   );
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
</script>

这里我使用的是 select2 过滤器

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

    <!-- Select2 JS -->
    <script src="select2/dist/js/select2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        console.log($('.inst_amount').length)
        $('.inst_amount').select2();
   });

    </script>

由于我是编码新手,请帮助我解决这个问题。

0 个答案:

没有答案
相关问题