bootstrap-select 获取值和文本

Posted 2023-02-24

【中文标题】bootstrap-select 获取值和文本

【英文标题】：bootstrap-select get the value and the text

【发布时间】：2017-12-01 21:34:03

【问题描述】：

我尝试选择要添加到组的公司，然后在数据库中进行连接。我有点被“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>

所以我有一个ul 和innerText，并提到选择与否。我的问题是如何将innerText 和选项（id）中的值传递给表单，以便将其传递给控制器​​和数据库。

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

【问题讨论】：

找到。即使从检查中不清楚，如果我这样做 $('#selectCmp').val() 我会得到所选值的 id

【参考方案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
);

虽然此代码可能不一定绑定到“changed.bs.select”，具体取决于您的应用逻辑。