如何更改selectize.js下拉列表的占位符？

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 changed. There is no method to do this in documentation.

Answer 1

You can specify a placeholder key as part of the options object when initialising. I couldn't find the option in the documentation and only found it digging through the code.

//init selectize
$(function() {
  $('select').selectize({
    placeholder: 'Click here to select ...',
  });
});

Answer 2

You need two things:

• add empty <option></option> as first option tag in the select.
• add placeholder key to selectize call

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>

Answer 5

Make sure you use a select tag for selectize .
I was having the same problem, caused by using an input instead. selectize worked too, but the placeholder attribute wasn't being displayed. When I changed to a select it started working

<select type="text" placeholder="Type words of the article..."></select>

Answer 6

$('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});

Answer 7

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 8

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 9

You can update the placeholder by setting selectize.settings.placeholder and then calling selectize.updatePlaceholder() .

 $(document).ready(function() { var s = $('#input-tags').selectize({ persist: false, createOnBlur: true, create: true, placeholder: 'start placeholder' })[0].selectize; $('#updatePlaceholder').click(function() { s.settings.placeholder = 'new placeholder'; s.updatePlaceholder(); }); }); 

 <!DOCTYPE html> <html> <head> <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script> <script src="script.js"></script> </head> <body> <h1>Selectize setting placeholder</h1> <input type="text" id="input-tags" value=""> <button id="updatePlaceholder">change</button> </body> </html> 

Answer 10

This is what worked for me (selectize version "selectize": "^0.12.4" and using typescript only):

this.selectize = $(this.select).selectize({
  options: this.options,
  placeholder: 'My Placeholder'
})[0].selectize;

this.selectize.settings.placeholder = 'Another Placeholder';
this.selectize.updatePlaceholder();