JSFiddle - React, Tailwind, and code Playground
HTML
<p>Sometimes you have to remove the current options in order to manipulate the selected options.</p>
<p>Here is an example how to append options:</p>
<select id="mySelectId" class="chosen-select" multiple="multiple">
<option value=""></option>
<option value="Argentina">Argentina</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Japan">Japan</option>
<option value="Thailand">Thailand</option>
</select>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);
selectAdditionalChosenOptions($('#mySelectId'), ['Thailand']);
/**
* Activate or refresh chosen selects within a container
* @param $container
* @param param
*/
function activateChosen($container, param) {
param = param || {};
$container.find('.chosen-select:visible').chosen(param);
$container.find('.chosen-select').trigger("chosen:updated");
}
function selectChosenOptions($select, values) {
$select.val(null); //delete current options
$select.val(values); //add new options
$select.trigger('chosen:updated');
}
/**
* Select additional options in a multi select chosen
* @param $select jQuery selector for a multi select
* @param values array with strings
*/
function selectAdditionalChosenOptions($select, values) {
var selected = $select.val() || []; //get current options
selected = selected.concat(values); //merge with...