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

Posted 2023-05-09

【中文标题】添加多个字段时，HTML多选下拉菜单Jquery和样式不起作用

【英文标题】：HTML Multiselect dropdown Jquery and Styles not working at when Add Multiple Fields

【发布时间】：2021-09-15 09:21:30

【问题描述】：

我在设置多选下拉菜单时遇到问题。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>

【参考方案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>

【讨论】：

谢谢.. 还有这个 - jsfiddle.net/5nj691ec 当这个添加到 HTML 表单时，我选择了 Item 1 & Item 2 ，但只提交了一个值.. ?

不，它发送两个值。请参阅this 单击提交按钮然后检查控制台结果，您将看到包含所有值的查询字符串。

对不起，我可以将它与自定义 HTML 表单一起使用吗？ ，我尝试使用带有 Google 表格的 HTML 表单.. 但它不起作用..

不确定。您可以针对该问题提出另一个问题，以便更多人可以帮助您:)

你能检查一下吗 - jsfiddle.net/13yeasedu/pwym90Lc/4