bootstrap-select値とテキストを取得

Question

私はグループに追加する企業を選択しようとし、その後でデータベースに接続します。私は「html」コードでブロックされています。

<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を持っているし、選択したかどうかについては言及：要素を検査しようとする場合、私は、私のようなものを持っている、

<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]をLaravelで働いています。私の問題は、コントローラーとデータベースに渡すために、フォームに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」にバインドされていないかもしれないが。