My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple select box.
Here is how it appears: https://i.sstatic.net/dL30m.png
When an item is selected and the + Add button is clicked, the item is removed from the list and placed in the multiple select box. Subsequently, if a single item is selected from the box and the - Remove button is clicked, it goes back to the select dropdown.
After submitting the form, I aim to save all items in the box in an array. The only way I have discovered to achieve this is by selecting the items when they are added to the multiple select box, causing them to appear highlighted. If a user clicks on any items within the box, they will be deselected and not saved in the array upon submitting the form.
This poses an issue because the - Remove button allows a single selected option to be returned to the dropdown select, where it is sorted alphabetically. This functionality does not work when multiple items are selected.
Below is the code snippet:
$("#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 exploring more efficient ways to implement this rather than using the multiple select box. Although checkboxes were suggested as an alternative, I must adhere to this design.