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”，这取决于你的应用程序逻辑。