通過jQuery填充選擇框時，jQuery Data-live-search無法正常工作

Question

當通過JQUERY填充選擇框時，我試圖獲取data-live-search選項，我的代碼如下

<script>
    window.onload = function () {
        $('#add').on('click', function () {

            var inp = $('#box');
            var i = $('input').length + 1;
            $('<div id="box' + i + '" class="col-lg-12"><table class="table table-bordered table-responsive table-responsive">\n\
                    <tbody>\n\
                        <tr>\n\
                            <td  style="width: 39%;"><select id="item" class="form-control selectpicker" name="item[]" data-live-search="true">\n\
                            </select></td>\n\
                            <td><input type="text" id="qty" class="form-control" name="qty[]" placeholder="Quantity" required/></td>\n\
                            <td><input type="text" id="amount" class="form-control" name="amount[]" placeholder="Amount" required/></td>\n\
                        </tr>\n\
                    </tbody>\n\
                </table></div>').appendTo(inp);
            i++;
        });
    }
</script>

現在，這段代碼可以正常工作，但是當我添加class="selectpicker" ，選擇框消失了。 有人可以幫助我如何實現這一目標。

這是我包含這些腳本的html代碼

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

Answer 1

你可以這樣使用

$('select').selectpicker();

要么

$('#selectID').selectpicker();

要么

$('select').selectpicker('refresh');

后追加方法。