Bootstrap multi select buttons

Всем привет. Раньше я использовал стандартные checkbox теперь я хочу начать использовать Bootstrap multi select

На данный момент я не вижу ни одной строчке в моем списке.

Мой новый код:

<li>
    <select href="#" class="selectpicker" data-value="option1" tabIndex="-1" multiple data-selected-text-format="count">
        <option checked>&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)</option>
        <option name="selection[@i]" value="true"></option>
        <option name="ids[@i]" value="@Model.AvailableCompanies[i].ID"></option>
    </select>
</li>

Мой прежний код:

<li>
    <a href="#" class="small" data-value="option1" tabIndex="-1">
        <input type="checkbox" checked />&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
        <input type="hidden" name="selection[@i]" value="true"/>
        <input type="hidden" name="ids[@i]" value="@Model.AvailableCompanies[i].ID" />
    </a>
</li>

Старая view:

<div>
    <div class="row">
        <div class="col-md-1">
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px"> <span class="CompNameBox"></span> <span class="caret"></span></button>
                <ul class="dropdown-menu" style="width: 180px">
                    @if (Model.AvailableCompanies != null)
                    {
                        for (int i = 0; i < Model.AvailableCompanies.Count; i++)
                        {
                            if (Model.Companies.Contains(Model.AvailableCompanies[i], new CompanyViewModelComparer()))
                            {
                                <li>
                                    <a href="#" class="small" data-value="option1" tabIndex="-1">
                                        <input type="checkbox" checked />&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
                                        <input type="hidden" name="selection[@i]" value="true" />
                                        <input type="hidden" name="ids[@i]" value="@Model.AvailableCompanies[i].ID" />
                                    </a>
                                </li>
                            }
                            else
                            {
                                <li>
                                    <a href="#" class="small" data-value="option1" tabIndex="-1">
                                        <input type="checkbox" />&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
                                        <input type="hidden" name="selection[@i]" value="false" />
                                        <input type="hidden" name="ids[@i]" value="@Model.AvailableCompanies[i].ID" />
                                    </a>
                                </li>
                            }
                        }
                    }
                </ul>
            </div>
        </div>
    </div>
</div>

Новыя View:

    <div>
    <div class="row">
        <div class="col-md-1">
            <div class="btn-group" >
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px"> <span class="CompNameBox"></span> <span class="caret"></span></button>
                <ul class="dropdown-menu" style="width: 180px">
                    @if (Model.AvailableCompanies != null)
                    {
                        for (int i = 0; i < Model.AvailableCompanies.Count; i++)
                        {
                            if (Model.Companies.Contains(Model.AvailableCompanies[i], new CompanyViewModelComparer()))
                            {
                            <li>
                                <select href="#" class="selectpicker" data-value="option1" tabIndex="-1" multiple data-selected-text-format="count">
                                    <option checked>&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)</option>
                                    <option name="selection[@i]" value="true"></option>
                                    <option name="ids[@i]" value="@Model.AvailableCompanies[i].ID"></option>
                                </select>
                            </li>
                            }
                            else
                            {
                            <li>
                                <select href="#" class="selectpicker" data-value="option1" tabIndex="-1" multiple data-selected-text-format="count">
                                    <option>&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)</option>
                                    <option name="selection[@i]" value="false"></option>
                                    <option name="ids[@i]" value="@Model.AvailableCompanies[i].ID"></option>
                                </select>
                            </li>
                            }
                        }
                    }
                </ul>
            </div>
        </div>
    </div>
</div>

JS

<script type="text/javascript">

var options = [];

$('.dropdown-menu a').on('click', function (event) {
    // This was your original function which sets the checkbox as checked or unchecked, and draws the check mark
    var $target = $(event.currentTarget),
        val = $target.attr('data-value'),
        $inp = $target.find('input[type="checkbox"]'),
        idx;
    if ((idx = options.indexOf(val)) > -1) {
        options.splice(idx, 1);
        setTimeout(function () { $inp.prop('checked', false) }, 0);
    } else {
        options.push(val);
        setTimeout(function () { $inp.prop('checked', true) }, 0);
    }
    $(event.target).blur();
    // This code is used to set the selection[] hidden input to true when the checkbox is checked 
    // and to false when the check mark is cleared
    $tap = $target.find('input[name*="selection"]');
    if ($inp.prop("checked")) {
        $tap.val('true');
    } else {
        $tap.val('false');
    }
    return false;
});
var length = $('.dropdown-menu > option').length;
var cb = $('.dropdown-menu input[type=checkbox]:checked'); // Selected chechboxes
var cnt = $('.CompNameBox'); // Container where to output text
if (cb.length === 1)
    cnt.text(cb.parent().text());
else if (cb.length > 1)
    cnt.text('Selected ' + cb.length + ' companies');
else if (cb.length === 0)
    cnt.text('Nothing selected');