Using a dropdown select list and a box to store selected options

Question

I have a form with a select dropdown to show available options (this gets filled from a database using php). The user selects options from the list and the options get added to a box below, so all the selected items get shown. The item below is a select multiple box and I think this one's causing a hassle.

It looks like this

When an item get selected and press the + Add button, the item gets removed from the list and added to the multiple select box. Then, one a single items gets selected from the box and then clicked the - Remove button, it goes back to the select dropdown.

After submitting the form, I want all the items inside the box to be saved in an array. The only way I've found to do that is select the items when added to the select multiple box, causing them to look highlighted and also if the user clicks any of the items inside the box, they will get deselected and not saved in the array after clicking the submit button.

This is also a problem because the - Remove button allows you to return a single selected option back into the dropdown select where it will be placed in alphabetical order and it won't work while having multiple items selected.

Here is the code I have

 $("#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> 

I'm wondering if there's a more efficient way to implement this than using the multiple select box. Someone suggested working with checkboxes, but I have to stick with this design.

Answer 1

I would forget about the selected items being a form element - have them as a ul that is created / modified dynamically on the selection of the first select list. Then you can have a hidden input and when the selection is completed - you can iterate over the list of selected elements and pass them to a hiddeen input - or other mx to transfer them to an input and pass them with the rest of the form.

Note that each line item now has a specific delete button - and clicking on it allows the delteion of that item. and therfore there has to be event delegation on the button since the are added to the DOM on the selection of the element.

 $("#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>