JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<select id="select" multiple="multiple" style='width: 300px;'>
<option value="v1">Choice A</option>
<option value="v2">Choice B</option>
<option value="v3">Choice C</option>
<option value="v4">Choice D</option>
</select>
<br/>
<br/>
<button id="appendBtn" type="button">Append</button>
JavaScript
$("#select").select2();
$("#appendBtn").click(function() {
$.ajax({
type: "POST",
url: '/echo/json/',
data: {
json: JSON.stringify({ value: 'v5', text: 'Choice E' }),
delay: 0.3,
},
dataType: 'json',
success: function(data) {
var $option = $('<option></option>')
.attr('value', data.value)
.text(data.text)
.prop('selected', true);
$('#select').append($option).change();
},
});
});