拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 使用.append的可搜索下拉选单不起作用

使用.append的可搜索下拉选单不起作用

白鹭 - 2022-02-17 2102 0 0

当我尝试使用可搜索下拉选单时,它在 .append 中不起作用。但正常作业得很好。

$(document).ready(function(){
          $('#add').click(function(){
              var AllCount=$("#AllCount").val();
              $("#AllCount").val(parseInt(AllCount) 1)
              var finalCount= parseInt(AllCount) 1;       
              $('#DynamicTable').append(' <tr id="row' finalCount '"><td ><select  id="employee_dropdown" name="state"><option value="AL">Alabama</option><option value="WY">Wyoming</option></select></td>');
          });
      });
   
   //jquery for show the dropdown
      $(document).ready(function() {
      $('.dropdown').select2();
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div>
   <button type="button" class="btn btn-success btn-sm m-1" id="add">
   Add Milestone
   </button>
</div>
<table>
   <tbody id="DynamicTable">
   </tbody>
</table>

uj5u.com热心网友回复:

每次创建或附加新的选择框后,都需要初始化 select2。

$(document).ready(function(){
      $('#add').click(function(){
          var AllCount=$("#AllCount").val();
          $("#AllCount").val(parseInt(AllCount) 1)
          var finalCount= parseInt(AllCount) 1;       
          $('#DynamicTable').append(' <tr id="row' finalCount '"><td ><select  name="state"><option value="AL">Alabama</option><option value="WY">Wyoming</option></select></td>');
      });
      $('#row' finalCount).find('.dropdown').select2();
  });

select 的相同 id employee_dropdown 属性也阻止了多个 select2 的初始化。您可以洗掉 id 属性或为每个元素使用不同的值。我已经洗掉了上面 select 元素的 id="employee_dropdown" 。

uj5u.com热心网友回复:

嘿,我的朋友在 select2 函式后追加

$('#DynamicTable').append('...'); $('.dropdown').select2();

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *