JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<select id="sel1" multiple></select>
<select id="sel2" multiple></select>

CSS

select {
  width: 150px;
  height: 200px;
}

JavaScript

$(document).ready(function() {
  var countries = ['USA', 'Canada', 'Portugal', 'Spain', 'France'],
    $sel1 = $('#sel1'),
    $sel2 = $('#sel2');

  var populateSelect = function($sel, options) {
    var html = '';
    for (var c = 0; c < options.length; c++) {
      html += '<option value="' + options[c] + '">' + options[c] + '</option>';
    }

    $sel.html(html);
  }

  $sel1.on('change', function() {
    $sel2.empty();

    var sel2Options = [];
    $sel1.find(':selected').each(function(i, selected) {
      sel2Options.push($(selected).text());
    });

    populateSelect($sel2, sel2Options);
  });

  populateSelect($sel1, countries);

});