JSFiddle - React, Tailwind, and code Playground

by Óscar Gómez Alcañiz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <form class="form-inline">
    <div class="row">
      <div class="col-xs-4">
        <select class="form-control" id="select-1" multiple="multiple">
          <option value="value-1.1" selected="selected">Item 1.1</option>
          <option value="value-1.2">Item 1.2</option>
        </select>
      </div>

      <div class="col-xs-4">
        <select class="form-control" id="select-2" multiple="multiple">
          <option value="value-2.1">Item 2.1</option>
          <option value="value-2.2" selected="selected">Item 2.2</option>
        </select>
      </div>

      <div class="col-xs-4">
        <button class="btn btn-primary" onclick="show()" type="button">Show selected</button>
      </div>
    </div>
  </form>

  <h3>Selected</h3>
  <div id="results" class="well well-sm"></div>
</div>

JavaScript

function show() {
  // Select first array of selected values.
  // It can be null so we make it by default an empty array.
  var selected = ($("#select-1").val() || [])
    // Then concatenate with second array of values
    .concat($("#select-2").val());

  console.log(selected);

  $("#results").find("p").remove();

  selected.forEach(function(item, i) {
    $("#results").append(
      $('<p/>').html("<strong>" + i + "</strong> " + item)
    );
  });
}

show();

$("button").on("click", function() { show(); });