bootstrap-select获取值和文本

时间:2017-06-28 13:26:32

标签: javascript php html5 laravel-5.2 bootstrap-select

我尝试对要添加到组的公司进行选择,然后在数据库中进行连接。我在" 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)中的值赋给表单,以便将其传递给控制器​​和数据库。

我希望它清楚......我在这一切中都是新的。

1 个答案:

答案 0 :(得分:2)

对于非'倍数'选择,它只是$('#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
});

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