Bootstrap-wählen Sie den Wert und den Text

Question

Ich versuche, eine Auswahlen auf Unternehmen zu einer Gruppe hinzufügen, und danach die Verbindung in der Datenbank zu tun. Ich bin irgendwie blockiert auf den "HTML" -Code. Ich arbeite 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, wenn versuchen, das Element zu inspizieren, ich habe so etwas wie:

<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 habe ich eine ul mit dem innerText und erwähnen über ausgewählte oder nicht. Mein Problem ist, wie man das innerText und den Wert von der Wahl (die Identifikation) dem Formular gibt, um dieses zum Prüfer und zur Datenbank zu übergeben.

Ich hoffe, es ist klar ... Ich bin irgendwie neu in all dem.

Answer 1

Für nicht 'multiple' wählen Sie es einfach $('#selectCmp').val() und

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

In diesem Fall kann das Array der gewählten Optionen IDs auch über $('#selectCmp').val() abgerufen werden.

Um Array ausgewählter Option Namen zu bekommen, kann es wie folgt geschehen:

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

Obwohl dieser Code könnte müssen nicht zwangsläufig zu ‚changed.bs.select‘ gebunden werden, abhängig von Ihrer Anwendung Logik.