CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Mohsin
Mohsin

Reputation: 75

Jquery data-live-search is not working when populating select box through jquery

I am trying to get data-live-search option when the select box is populated through JQUERY my code is as follow

<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>

Now, this code is working fine but when I add class="selectpicker" the select box disappear. Can someone please help me how to achieve that.

And here is my html code of including these scripts

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

Upvotes: 0

Views: 1886

Answers (1)

Soft One Global
Soft One Global

Reputation: 175

you can use like this

$('select').selectpicker();

OR

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

OR

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

after append method.

Upvotes: 3

Related Questions