使用下拉選擇列表和一個框來存儲選定的選項

Question

我有一個帶有選擇下拉列表的表格，以顯示可用的選項（使用php從數據庫中填充該表格）。 用戶從列表中選擇選項，這些選項將添加到下面的框中，因此將顯示所有選中的項。 下面的項目是一個選擇多個框，我認為這引起了麻煩。

看起來像這樣

選擇一個項目並按+添加按鈕后，該項目將從列表中刪除並添加到多重選擇框中。 然后，從框中選擇一個項目，然后單擊-刪除按鈕，它返回到選擇下拉列表。

提交表單后，我希望將框內的所有項目保存在數組中。 我發現這樣做的唯一方法是在添加到“選擇多個”框中時選擇項目，從而使它們看起來突出顯示，並且如果用戶單擊該框中的任何項目，它們將被取消選擇並且不會保存在單擊提交按鈕后的數組。

這也是一個問題，因為-刪除按鈕允許您將單個選擇的選項返回到下拉選擇中，該選項將按字母順序放置，並且在選擇了多個項目時將不起作用。

這是我的代碼

 $("#agregarFamilia").click(function() { if ($('#idFamilia').val() > 0) { var names = $('#idFamilia').find('option:selected').text(); var newOption = $('<option></option>').attr("selected", "selected"); newOption.val(names); newOption.html(names); $("#nombresFamilia").append(newOption); $("#idFamilia option:selected").remove(); } }); $("#removerFamilia").click(function() { var length = $('#idFamilia').children('option').length; var names = $('#nombresFamilia').find('option:selected').text(); $("#nombresFamilia option:selected").remove(); $("#idFamilia").append($("<option></option>").val(length + 1).html(names)); //Returns the removed item to the dropdown list in alphabetical position var foption = $('#idFamilia option:first'); var soptions = $('#idFamilia option:not(:first)').sort(function(a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }); $('#idFamilia').html(soptions).prepend(foption); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-md-6"> <select id="idFamilia" name="idFamilia" class="form-control"> <option value="0">Select</option> <option value="1">PCR</option> <option value="2">CABLES</option> </select> </div> <div class="col-md-2"> <a style="display:block;width:145px" id="agregarFamilia" class="btn btn-primary"> <span class="fa fa-plus"></span> Add </a> </div> </div> <div class="form-group"> <label for="nombresFamilia" class="col-md-4 control-label"></label> <div class="col-md-6"> <select multiple="multiple" id="nombresFamilia" name="nombresFamilia[]" class="form-control"> </select> </div> <div class="col-md-2"> <a style="display:block;width:145px" id="removerFamilia" class="btn btn-danger"> <i class="fa fa-minus"></i> Remove selection </a> </div> </div> 

我想知道是否有比使用多重選擇框更有效的方法來實現此目的。 有人建議使用復選框，但我必須堅持這種設計。

Answer 1

我會忘記所選項目是表單元素-將它們作為ul，在選擇第一個選擇列表時動態創建/修改。 然后，您可以有一個隱藏的輸入，選擇完成后，您可以遍歷所選元素的列表，然后將它們傳遞給hiddeen輸入；或者將其他mx傳遞給輸入，並將它們與表單的其余部分一起傳遞。

請注意，每個訂單項現在都有一個特定的刪除按鈕-單擊該按鈕可以刪除該項目。 並且因此必須在按鈕上進行事件委托，因為在選擇元素時將其添加到DOM中。

 $("#agregarFamilia").click(function() { if ($('#idFamilia').val() > 0) { var names = $('#idFamilia').find('option:selected').text(); var newOption = $('<option></option>').attr("selected", "selected"); newOption.val(names); newOption.html(names); $("#nombresFamilia").append(newOption); $("#idFamilia option:selected").remove(); $('#selectedList').append('<li>'+names+'<button type="button" class="delete btn btn-danger btn-xs pull-right">Remove</button></li>') } }); $("body").on("click",".delete", function() { var name = $(this).parent().text().replace(/Remove/,''); $(this).parent().remove(); $("#idFamilia").append($("<option></option>").val(length + 1).html(name)); //Returns the removed item to the dropdown list in alphabetical position var foption = $('#idFamilia option:first'); var soptions = $('#idFamilia option:not(:first)').sort(function(a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }); $('#idFamilia').html(soptions).prepend(foption); }); 

 #selectedList li {margin-bottom:10px} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-md-6"> <select id="idFamilia" name="idFamilia" class="form-control"> <option value="0">Select</option> <option value="1">PCR</option> <option value="2">CABLES</option> </select> </div> <div class="col-md-2"> <a style="display:block;width:145px" id="agregarFamilia" class="btn btn-primary"> <span class="fa fa-plus"></span> Add </a> </div> </div> <div> <ul id="selectedList"></ul> </div>