JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.3.1/select2.css">
<script src="//cdn.jsdelivr.net/select2/3.3.1/select2-spinner.gif"></script>
<script src="//cdn.jsdelivr.net/select2/3.3.1/select2.js"></script>
<div class="modal hide" id="select-window" tabindex="false">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Filtering Disabled Example</h3>
</div>
<div class="modal-body">
<select id="select2-demo" class="input-large">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
CSS
#select-window .modal-body {
height: 100px;
overflow: auto;
}
JavaScript
$('#select-window').modal({
show:true
});
$('button').click(function(evt) {
$('#select-window').modal('show');
});
$('#select2-demo').select2();