bootstrap-select獲取值和文本

Question

我嘗試對公司進行選擇以添加到組中，然後在數據庫中執行連接。我在「html」代碼上被封鎖了。我在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> 

好工作，如果嘗試檢查元素，我有這樣的：

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

所以我與innerText一個ul並提及關於選擇與否。我的問題是如何將innerText和選項（id）的值賦給表單以將其傳遞給控制器​​和數據庫。

我希望這很清楚......我在這一切中都是新鮮的。

Answer 1

對於非 '多個' 選擇它是簡單地$('#selectCmp').val()和

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

在這種情況下，所選選項ID的數組也可以通過$('#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 
}); 

雖然這段代碼可能無法neccessarily於「changed.bs.select」，這取決於你的應用程序邏輯。