CODEWITHSUNDEEP
jquerylaravellaravel-5
katie hudson
katie hudson

Reputation: 2893

Add selectpicker to dynamic input

I am using Laravel. Within my controller, I pass my view a list of questions. I then display things like so

@foreach($questions as $q)
    <div class="col-xs-12">
        <input type="{{ $q["type"] }}" class="form-control {{ $q["class"] }}">
    </div>
@endforeach

Now some of these inputs have a type select, and a class which is then set to selectpicker. Now normally, to set the selectpicker I would use something like this

$(function () {
    $('.selectpicker').selectpicker();
});

But because it is being added after the DOM it does not work. I have searched online and tried suggestions like this

$('body').on('focus',".selectpicker", function(){
    if( $(this).hasClass('selectpicker') === false )  {
        $(this).selectpicker({
            liveSearch: true
        });
    }
});

However the above does not seem to work. How can I get selectpicker working on dynamically added elements?

Thanks

Upvotes: 0

Views: 517

Answers (1)

dparoli
dparoli

Reputation: 9161

You cannot use a input element with type=select, i.e. this html does NOT work:

<input type="select" class="form-control selectpicker">

The correct html code for a select element is that:

<select class="form-control selectpicker">
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

Upvotes: 1

Related Questions