selectize.js on dynamically created select element

Question

I am using selectize.js in two separate ways. First, I have select elements that are in the html and selectize objects are created at page load. These elements behave correctly. However, I use jquery to dynamically create new select elements (with options) and then attempt to instantiate selectize on them.

When I do this, these elements will not allow me to type an input into the select element but the dropdown still works.

Vignesh Raja Vignesh Raja · Accepted Answer · 2018-07-17T16:30:42

Create an element, append it and call the plugin on the element.

$(document).ready(function(){
    var options = {
        delimiter: ',',
        persist: false,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    };
    
    $('#input-tags').selectize(options);
    $('#input-tags2').selectize(options);
    
    //Creating new selectize
    var newinput = $("<input id='input-tags3'/>");
    $("body").append(newinput);
    newinput.selectize(options)
});

<link href="https://selectize.github.io/selectize.js/css/selectize.default.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>

<input id="input-tags" value="a,b">
<input id="input-tags2" value="a,b">

selectize.js on dynamically created select element

1 Answers