JSFiddle - React, Tailwind, and code Playground

by sinju

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">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Select Overflow Example</h3>
    </div>
    <div class="modal-body">
        <select id="select2-demo" class="input-large">
            <option value="1">Door #1</option>
            <option value="2">Select #2</option>
            <option value="3">Floor #3</option>
            <option value="4">Door #4</option>
            <option value="5">Door #5</option>
            <option value="6">Door #6</option>
            <option value="7">Door #7</option>
            <option value="8">Door #8</option>
        </select>
        <select id="select2-demo2" class="input-large" multiple="multiple">
            <option value="1">Door #1</option>
            <option value="2">Door #2</option>
            <option value="3">Door #3</option>
            <option value="4">Door #4</option>
            <option value="5">Door #5</option>
            <option value="6">Door #6</option>
            <option value="7">Door #7</option>
            <option value="8">Door #8</option>
        </select>
    </div>
</div>

<br><br>
    <center>
        <button class="btn">Launch!</button>
    </center>

CSS

#select-window .modal-body {
    height: 180px;
    overflow: auto;
}

JavaScript

$('#select-window').modal({
    show:false
});
$('button').click(function(evt) {
    $('#select-window').modal('show');
});
$('#select2-demo, #select2-demo2').select2();