JSFiddle - React, Tailwind, and code Playground
HTML
<select data-placeholder="Choose a Country..." id="task-tags-input" class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
</select>
<hr>
<button id="add-tags-btn-1">Add Tags "PHP" and "JavaScript" to Selection Options</button>
<br>
<Br>
<button id="add-tags-btn-2">Add Tags "MySQL" and "Oracle" to Selection Options</button>
<br>
<br>
<button id="add-tags-btn-3">Add Tags "CSS" and "HTML" to Selection Options</button>
CSS
[class^=ui] {
border:2px solid red
}
JavaScript
$(document).ready(function () {
// init ChosenJS on Tag input field
// $('#task-tags-input').chosen({
// no_results_text: 'Oops, nothing found!',
// width: "95%"
// });
// Add new Tag options to Selection field
function addTagSelectionOptions(tagName) {
var $taskTagsInpuitEl = $('#task-tags-input');
//testing
// add new Tag selection options
if (!$taskTagsInpuitEl.find("option[value="+tagName + "]").length) {
$taskTagsInpuitEl.append('<option value="' + tagName + '">' + tagName + '</option>');
}
// trigger Chosen to update after adding new options so that they show up!
$taskTagsInpuitEl.trigger("chosen:updated");
}
// Add new Tag selection options when button clicked
$('#add-tags-btn-1').on('click', function () {
addTagSelectionOptions('PHP');
addTagSelectionOptions('JavaScript');
});
// Add new Tag selection options when button clicked
$('#add-tags-btn-2').on('click', function () {
addTagSelectionOptions('MySQL');
addTagSelectionOptions('Oracle');
});
// Add new Tag selection options when button clicked
$('#add-tags-btn-3').on('click', function () {
addTagSelectionOptions('CSS');
addTagSelectionOptions('HTML');
});
});