<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="select2: { data: allOptions() }">
<!-- ko if: allOptions().length === 0 -->
<option disabled="disabled">No people found</option>
<!-- /ko -->
</select>
<div class="input-group">
<div class="input-group">
<span class="input-group-addon">Select A Scanner</span>
<select class="js-example-basic-single" style="width: 150px">
<option></option>
<option>Bridgeport</option>
<option>carthage</option>
<option>Cotulla</option>
<option>Cotulla 2</option>
<option>Crescent OK</option>
<option>Damascus</option>
<option>Export</option>
<option>Granbury</option>
<option>Granbury2</option>
<option>Greeley</option>
<option>Hebbronville</option>
<option>Houston</option>
<option>Houston_Scan</option>
<option>LakeCharles</option>
<option>Longview</option>
<option>Midland</option>
<option>Minden</option>
<option>Morgan</option>
<option>Refugio</option>
<option>Shipped</option>
<option>Sonora</option>
<option>Victoria</option>
<option>Victoria_Emissions</option>
<option>Victoria_OH</option>
<option>Victoria_Scan</option>
<option>Victoria_Sep</option>
<option>Victoria2</option>
<option>Other</option>
</select>
</div>
<div class="input-group-btn"></div>
<button type="button" class="btn btn-secondary" id="uploadFilesToggle"><span class="fa fa-cloud-upload"></span> Attach PDF/Excel Documents</button>
<button type="button" class="btn btn-secondary" id="editFilesToggle"><span class="fa fa-file-text-o"></span> Edit Uploaded Files' Properties</button>
</div>
select {
width: 100%;
position: relative;
clear: both;
float: none;
}
$(document).ready(function() {
$('.js-example-basic-single').select2({
placeholder: 'Select A Scanner',
theme: "bootstrap"
});
});
$('.js-example-basic-single').on("select2:select", function (e) {
var data = $(this).select2('data');
alert(data[0].text);
});
ko.bindingHandlers.select2 = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = ko.unwrap(valueAccessor());
ko.unwrap(allBindings.get('selectedOptions'));
$(element).select2(options);
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = ko.unwrap(valueAccessor());
ko.unwrap(allBindings.get('selectedOptions'));
$(element).select2(options);
}
};
function ViewModel() {
var _this = this;
_this.allOptions = ko.observableArray([
{
id: '1706',
text: 'Nathan Friend'
},
{
id: '1707',
text: 'Carlos Pabon'
},
{
id: '1708',
text: 'Ryan Hoffman'
},
{
id: '1709',
text: 'Judah DePaula'
},
{
id: '1710',
text: 'Alex Dirks'
},
{
id: '1711',
text: 'Andy Mitchell'
},
{
id: '1712',
text: 'Gopal Krishnan'
},
{
id: '1713',
text: 'Ryan Johnsen'
},
]);
}
ko.applyBindings(new ViewModel());
