添加多个字段时，HTML多选下拉菜单Jquery和样式不起作用

Question

我在设置多选下拉菜单时遇到问题。HTML 多选下拉 Java 脚本在添加多个字段时不起作用。

这是我的填充脚本链接 - https://jsfiddle.net/13yeasedu/j6gd5kvo/12/

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/jquery-1.4.3.min.js" integrity="sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">

<div id="Multiple-Fields">
<p> 
<label for="items_list">
<select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
</select>
</label>    
</p>
</div>
<h6><a href="#" id="add_Multiple-Fields">Add Multiple Fields</a></h6>

<script>

    $(document).ready(function(){

    var multipleCancelButton = new Choices('#choices-multiple', {
    removeItemButton: true,
    maxItemCount:5,
    searchResultLimit:5,
    renderChoiceLimit:5
    });

    });

</script>

<script>
$(function() {
        var scntDiv = $('#Multiple-Fields'); 
        var i = $('#Multiple-Fields p').size() + 1;
        
        $('#add_Multiple-Fields').live('click', function() {
        
                $('<p> <label for="items_list"><select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple><option value="Item 1">Item 1</option><option value="Item 2">Item 2</option></select></label> <a href="#" id="rem_Multiple-Fields">Remove</a></p>').appendTo(scntDiv);
                
                i++;
                return false;
        });
        
        $('#rem_Multiple-Fields').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});
</script>

Answer 1

您需要使用 Choices 插件初始化您新添加的选择。所以，你可以使用new Choices($('#Multiple-Fields select[name=items_lists]:last')[0], options);，这会给你最后一个选择框，然后用options初始化它。

演示代码：

//save this some variable for later use..
var options = {
  removeItemButton: true,
  maxItemCount: 5,
  searchResultLimit: 5,
  renderChoiceLimit: 5
}
var multipleCancelButton = new Choices('#choices-multiple', options);

$(function() {
  var scntDiv = $('#Multiple-Fields');
  var i = $('#Multiple-Fields p').size() + 1;

  $('#add_Multiple-Fields').live('click', function() {

    $('<p> <label for="items_list"><select name="items_lists" placeholder="Please Select The Items" multiple><option value="Item 1">Item 1</option><option value="Item 2">Item 2</option></select></label> <a href="#" id="rem_Multiple-Fields">Remove Field</a></p>').appendTo(scntDiv);
    new Choices($('#Multiple-Fields select[name=items_lists]:last')[0], options); //intialize last added select-box.
    i++;
    return false;
  });

  $('#rem_Multiple-Fields').live('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.4.3.min.js" integrity="sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />


<div id="Multiple-Fields">
  <p>
    <label for="items_list">
          <select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple>
            <option value="Item 1">Item 1</option>
            <option value="Item 2">Item 2</option>
          </select>
        </label>
  </p>
</div>

<h6><a href="#" id="add_Multiple-Fields">Add Multiple Fields</a></h6>