html - 添加新的下拉菜单并提交几个 Vales，只提交一个值

Question

当下拉列表中的值被选中并提交时，所有的值都会被提交。

但是当您去添加新项目并添加新的下拉菜单并提交几个 Vales 时，只会提交一个值。

$(document).ready(function(){

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


});

$(document).ready(function(){

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


});


$('#submit').click(function(){
var multiselect = $('#choices-multiples').val();
var multiselects = $('#choices-multiple').val();
document.getElementById("items-1").value = multiselect;
document.getElementById("items-2").value = multiselects;
});



 $(function() {
        var scntDiv = $('#items-lists');
        var i = $('#items-lists p').size() + 1;
        
        $('#add_items').live('click', function() {
                
               $(`<p> <label for="item-list-1"><select name="items-cat-1-${i}" id="choices-multiples-${i}"  placeholder="Select The Items 1" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label>  <br><label for="item-list-2"><select name="items-cat-2-${i}" id="choices-multiple-${i}"   placeholder="Select The Items 2" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br><input type="text" name="items-cat-1-${i}" id="items-1-${i}"><input type="text" name="items-cat-2-${i}" id="items-2-${i}"> <a href="#" id="rem_items-lists">Remove Field</a></p>`).appendTo(scntDiv);   
                
                var multipleCancelButton = new Choices(`#choices-multiple-${i}`, {
                  removeItemButton: true,
                  maxItemCount:5,
                  searchResultLimit:5,
                  renderChoiceLimit:5
                  });
                  
                  var multipleCancelButton = new Choices(`#choices-multiples-${i}`, {
                  removeItemButton: true,
                  maxItemCount:5,
                  searchResultLimit:5,
                  renderChoiceLimit:5
                  });
                  
                    
                    $('#submit').click(function(){
                    document.getElementById("items-1-${i}").value = $("#choices-multiples-${i}").val();
                    document.getElementById("items-2-${i}").value = $("#choices-multiple-${i}").val();
                    });
                                    
                i++;
                return false;
        });
        
        $('#rem_items-lists').live('click', function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.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>


<form method="post"  id="datasend" autocomplete="off" onsubmit="return checkForm(this);" name="datasend">
                <div id="items-lists">
                    <p>
        
                    <label for="item-list-1"><select name="items-cat-1" id="choices-multiples"  placeholder="Select The Items 1" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label>  <br>
                    <label for="item-list-2"><select name="items-cat-2" id="choices-multiple"   placeholder="Select The Items 2" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br>
                    
                    <input type="text" name="items-cat-1" id="items-1">
                    <input type="text" name="items-cat-2" id="items-2">
            
                    </p>

                </div>

        <h6><a href="#" id="add_items">Add New Items</a></h6>
  
     <input id="submit" type="submit" name="submit" value="Submit" onclick="getMultipleSelectedValue()"/>

</form>

当下拉列表中的值被选中并提交时，所有的值都会被提交。

但是当您去添加新项目并添加新的下拉菜单并提交几个 Vales 时，只会提交一个值。

标签： htmljquery