Bootstrap Snippet Select 2 using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
select {
    width: 100%;
    position: relative;
    clear: both;
    float: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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'
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Select 2"
Bootstrap 3.0.0 Snippet by CharlesStone

Related: See More

Questions / Comments:

"Select 2" Bootstrap 3.0.0 Snippet by CharlesStone

Related: See More

Questions / Comments:

"Select 2"
Bootstrap 3.0.0 Snippet by CharlesStone