bootstrap-select get the value and the text

Question

I try to do a selections on companies to add to a group, and after that to do the connection in database. I'm kind of blocked on the "html" code. I work in Laravel

<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>

Ok, if try to inspect the element, I have something like:

<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>

So I have a ul with the innerText and mention about selected or not. My problem is how to give the innerText and the value from option (the id) to the form in order to pass that to controller and to database.

I hope it's clear... I'm kind of new in all this.

Answer 1

For non 'multiple' select it is simply $('#selectCmp').val() and

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

In this case the array of chosen options ids can be also gotten via $('#selectCmp').val().

To get array of selected option names, it can be done like this:

$('#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
});

Though this code might not be neccessarily bound to 'changed.bs.select', depending on your app logic.