javascript - 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)的值提供给表单，以便将其传递给 Controller ​​和数据库。

我希望一切都清楚...我对这一切有点陌生。

Answer 1

对于非“多重”选择，它只是$('#selectCmp').val() 和

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

在这种情况下，也可以通过 $('#selectCmp').val() 获取所选选项 ID 的数组。

要获取选定选项名称的数组，可以这样做:

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

尽管此代码可能不一定绑定(bind)到“changed.bs.select”，具体取决于您的应用程序逻辑。