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 · Accepted Answer · 2018-07-17 16:30:42Z

0

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

answered Jul 17, 2018 at 16:30

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jay Ocean Over a year ago

Thank you for sharing. The problem occurs when I am dynamically creating a new select element through jQuery. When I do this, hitting delete to clear an input deselects the select input and then will not allow me to enter text.

Vignesh Raja Over a year ago

Couldn't get you clearly. You mean on deleting a value from the input box, prevents you from entering the same value again? or it prevents from entering any input ? or else can you update your question with a working fiddle to get understand.

Jay Ocean Over a year ago

It prevents me from adding any input. The moment I delete it, it deselects the input and then when I click again and try to enter text it won't allow me.

Vignesh Raja Over a year ago

Sorry, still I couldn't get you. It works fine for me. Can you share me a fiddle?

Lan Danel Over a year ago

Call the selectize plugin once you have created the Select (options) tag. @JayOcean

Collectives™ on Stack Overflow

selectize.js on dynamically created select element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related