I am currently integrating the select2 library within a Bootstrap 4 modal in the following manner:
<div class="form-group" id="fg-jbInd">
<label for="jbIndustry" class="control-label"gt;Industry *
<select type="text" id="jbIndustry" class="form-control" name="jbIndustry">
</select>
</label>
</div>
The JavaScript implementation is as follows:
$('#jbIndustry').select2({
placeholder: 'Please select one or more industries or leave blank',
minimumInputLength : 2,
dropdownParent: $('#fg-jbInd'),
ajax: {
url : '/getindustry',
dataType : 'json'
}
});
The response from the ajax call returns data structured like this:
{results : [{id : 1, test: 'option 1'},
{id : 2, text: 'option 2'}
]
The functionality of selecting an option and populating the field is functioning properly. However, I encounter an issue when attempting to select another option. Although the desired option is visible while typing, upon selection, the field does not populate with the new choice, retaining the original selection instead. This behavior can be bypassed by removing the search limit on the database, allowing the selection of a different option to populate the field. Upon further investigation, I found that for it to work correctly, the data must include the original selection, demonstrated as such:
{results : [{id : 1, test: 'option 1'},
{id : 2, text: 'option 2', selected : true}
]
In scenarios where the selected option is omitted from the data, the feature fails to perform adequately. I am curious if others have encountered similar challenges. Thank you!