How to change placeholder of selectize.js dropdown?

Question

I want to change placeholder of a dropdown created by selectize.js when the parent dropdown changes its selection to load the options of the dropdown whose placeholder to be cha

Answer 1

selectize.js will create an input below the select. This input will have the class .selectize-control.

You can replace the placeholder of this input field with jQuery.

You can do something like:

$(".selectize-control").attr('placeholder','Hello World!');

If you would like a working example, Ill need more information about your code.

Answer 2

I had a similar issue - what was frustrating is I would do something like this:

$("selectize-input input[placeholder]").attr('placeholder','Hello World!');

Then only after changing the focus it would render my new placeholder text. It turns out that for whatever reason (probably a good one) selectize applies a width to this input.

Final solution:

$(".selectize-input input[placeholder]").attr('placeholder','Hello World!');
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");

Answer 3

Not sure if selectize keeps changing their code or if everyone else on this thread just whiffed but all of these answers seem to be wrong individually, but if you kind of combine the correct parts from each answer you wind up with this which works for me.

        var textHandler = function(name) {
        return function() {
            if(name == 'focus'){                    
                jQuery("select#myid + .selectize-control").find("input:text").prop({"placeholder": ""});
            }
        };
    };
    jQuery('#sf159_textsearchtextsearch').selectize({
        closeAfterSelect: true,
        hideSelected    : true,
        createOnBlur    : true,
        openOnFocus     : true,
        maxOptions      : 10,
        persist         : true,
        placeholder     : "Neighborhood, Street, School, Zip, MLS",
        plugins         : ['remove_button'],
        valueField      : 'id',
        labelField      : 'text',
        searchField     : 'value',
        options         : [],
        create          : false,
        render          : {
            option: function (item, escape) {
                //console.log(item);
                var address = '';
                var keyword = '';
                var tx = item.text.split(',');
                for (var i = 0, n = tx.length; i < n; i++) {                        
                    address += '<span class="span4">' + escape(tx[i]) + '</span>';                      
                }
                var template = '<div>' +
                        '<div class="row-fluid"> ' + address + ' </div>' +
                        '</div>';
                return template;
            }
        },
        load            : searchHandler,
        onKeydown       : keyHandler,
        onDelete        : deleteHandler,
        onFocus         : textHandler('focus'),
    });

Answer 4

You can specify placeholder for select elements by adding an empty option element inside select tag. Here is an example:

<select name="color" required>
    <option value=""> Select a color </option>
    <option value="1"> Lavender </option>
    <option value="2"> Eggplant </option>
    <option value="3"> Cool grey </option>
    <option value="4"> Bitter lemon </option>
</select>