select2.js multiple

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div>
<label>Location</label><br>
<select multiple id="e1" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>
</div>

<div>
<label>Type</label><br>
<select multiple id="e2" style="width:300px">
  <option value="SV">SUV</option>
  <option value="SD">Sedan</option>
  <option value="CP">Coupe</option>
  <option value="TR">Truck</option>
</select>
</div>

<div>
<label>Color</label><br>
<select multiple id="e3" style="width:300px">
  <option value="BL">Blue</option>
  <option value="RD">Red</option>
  <option value="GR">Green</option>
  <option value="BL">Black</option>
  <option value="WH">White</option>
</select>
</div>

<div class='col-xs-12'></div>
<button type="button" class="btn btn-primary">Search</button>

CSS

.col-xs-12 {
  margin: 1em;
}

JavaScript

$("#e1").select2();$("#e2").select2();$("#e3").select2();
function getValues(id) {
	return $("#" + id).val().join(",");
}
$("button").click(function() {
	prompt("", "search" +
  	"?loc=" + getValues("e1") +
  	"&type=" + getValues("e2") +
  	"&col=" + getValues("e3")
    )
})