bootstrap-select получает значение и текст

Question

Я пытаюсь сделать выбор по компаниям, чтобы добавить в группу, и после этого сделать соединение в базе данных. Я вроде заблокирован на "HTML-код". Я работаю в Ларавеле

<select id="selectCmp" class="selectpicker" data-live-search="true" multiple title="Select structures">
    @foreach($allCompanies as $company)
        <option value="{{$company->id}}"> {{$company->name}}</option>
    @endforeach
</select>

<iframe name="votar" style="display:none;"></iframe>

<form action={{route('admin.group.affect')}} method="POST" target = "votar">
    {{csrf_field()}}
    <div id="cmpInputList">

    </div>
    </br>
    <button id="addGroupeBtn" class="btn btn-secondary" type="submit">
        Add
    </button>
</form>

Хорошо, если попытаться проверить элемент, у меня есть что-то вроде:

<div class="btn-group bootstrap-select show-tick dropup">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button"
            data-id="selectCmp" title="Select structures" aria-expanded="true"><span
            class="filter-option pull-left"> Select structures</span>&nbsp;<span class="bs-caret"><span
            class="caret"></span></span></button>
    <div class="dropdown-menu open" role="combobox" style="max-height: 560px; overflow: hidden; min-height: 142px;">
        <div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="textbox"
                                         aria-label="Search"></div>
        <ul class="dropdown-menu inner" role="listbox" aria-expanded="false"
            style="max-height: 504px; overflow-y: auto; min-height: 86px;">
            <li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option"
                                           aria-disabled="false" aria-selected="false"><span
                    class="text"> A</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
            <li data-original-index="1"><a tabindex="0" class="selected" data-tokens="null" role="option"
                                           aria-disabled="false" aria-selected="true"><span
                    class="text"> B </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
            <li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option"
                                           aria-disabled="false" aria-selected="false"><span
                    class="text"> C </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>

        </ul>
    </div>
    <select multiple="multiple" id="selectCmp" data-live-search="true" title="Select structures"
            class="selectpicker" tabindex="-98">
        <option value="1"> A</option>
        <option value="0">B</option>
        <option value="2"> C</option>

    </select>
</div>

<iframe name="votar" style="display: none;"></iframe>

<form action="http://127.0.0.1:8000/admin/affectCmpToGroup" method="POST" target="votar">
    <input type="hidden" name="_token" value="KSyRBJq6p6yJBPJnv0EOsC2sJwEe2SbzjxtLtuI5">
    <div id="cmpInputList"></div>
    <br>
    <button id="addGroupeBtn" type="submit" class="btn btn-secondary">
        Add
    </button>
</form>

Итак, у меня есть ul с innerText и упоминать о избранных или нет. Моя проблема в том, как дать innerText и значение из опции (id) в форму, чтобы передать это контроллеру и базе данных.

Надеюсь, это понятно... Я новичок во всем этом.

Answer 1

Для не "множественного" выбора это просто $('#selectCmp').val() а также

$('#selectCmp option:selected').text(),

В этом случае массив идентификаторов выбранных опций также можно получить через $('#selectCmp').val(),

Чтобы получить массив имен выбранных опций, это можно сделать так:

$('#selectCmp').on('changed.bs.select', function (e) {
    var options = $('#selectCmp option:selected');
    var selected = [];

    $(options).each(function(){
        selected.push( $(this).text() ); 
        // or $(this).val() for 'id'
    });

    // write value to some field, etc
});

Хотя этот код не обязательно должен быть привязан к "change.bs.select", в зависимости от логики вашего приложения.