Select2 Style and Working Example

by Avinashullal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<input type="hidden" id="test" />
<br/>
<br/>
<p>Selected IDs: <strong><span id="selectedID"></strong>
    </span>
</p>
<p>Selected Options: <strong><span id="selectedText"></strong>
    </span>
</p>

CSS

body {
    background-color: #eee;
    height: 100%;
    font-family: Segoe UI, Open Sans;
    font-size: 14px;
    color: #393939;
    line-height: 1.5;
    margin:20px;
}
.select2-container {
    border: 1px solid #e7e7e7;
    outline: 0 none !important;
}
.select2-chosen {
    color: #666 !important;
}
.select2-container .select2-choice {
    background: #fff !important;
    border: none !important;
    height: 34px !important;
    line-height: 34px !important;
}
.filter-dropdown .select2-container .select2-allowclear .select2-choice abbr {
    display: none !important;
}
.select2-container-active .select2-choice {
    box-shadow: none !important;
}
.select2-container .select2-choice span {
    margin: 0 !important;
}
.select2-container .select2-choice div {
    display: none !important;
}
.select2-container .select2-choice .select2-arrow {
    display: block !important;
    width: 11px !important;
    height: 7px !important;
    background: url(http://d2l7b0usk48cxd.cloudfront.net/prod/34/i/icon-filter.png) no-repeat 0 0 !important;
    right: 10px !important;
    top: 14px !important;
    position: absolute !important;
    border: none !important;
}
.select2-drop {
    box-shadow: none !important;
    width: 300px !important;
    margin-top: 0px !important;
    border-radius: 0 !important;
    height: auto !important;
    overflow: auto !important;
}
.select2-drop.select-drop-active {
    background: #fff !important;
    border: 1px solid #e7e7e7 !important;
    position: absolute !important;
    top: 100%;
    box-shadow: none !important;
    z-index: 999;
}
.select2-drop-active {
    border: 1px solid #e7e7e7 !important;
}
.select2-search {
    padding: 5px !important;
}
.select2-drop .select2-search input {
    height: 34px !important;
    background: #fff !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px !important;
    padding: 0 !important;
    text-indent: 12px;
}
.select2-results {
    margin: 0 !important;
    padding: 0...

JavaScript

var test = $('#test');
$(test).select2({
    data: [{
        id: 0,
        text: "enhancement"
    }, {
        id: 1,
        text: "bug"
    }, {
        id: 2,
        text: "duplicate"
    }, {
        id: 3,
        text: "invalid"
    }, {
        id: 4,
        text: "wontfix"
    }],
    width: "300px"
});

$(test).change(function () {
    //var theID = $(test).val(); // works
    //var theSelection = $(test).filter(':selected').text(); // doesn't work
    var theID = $(test).select2('data').id;
    var theSelection = $(test).select2('data').text;
    $('#selectedID').text(theID);
    $('#selectedText').text(theSelection);
});