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

当父下拉列表更改其选择以加载要更改其占位符的下拉列表的选项时，我想更改selectize.js创建的下拉列表的占位符。文档中没有这样做的方法。

您可以通过在select标记中添加一个空选项元素来为select元素指定占位符。以下是一个例子：

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

selectize.js将在select下创建一个输入。此输入将具有类。选择控件

可以用jQuery替换此输入字段的占位符

您可以执行以下操作：

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

如果您想要一个工作示例，我需要有关您的代码的更多信息。

请确保使用select标记进行selectize。 我也遇到了同样的问题，这是由使用输入引起的。selectize也起作用，但占位符属性未显示。 当我改为选择时，它开始工作

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

初始化时，可以将占位符键指定为options对象的一部分。我在文档中找不到该选项，只是在代码中找到了它

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

你需要两件事：

在“选择”对话框中添加空作为第一个选项标记。 添加占位符键以选择通话

---

我不确定selectize是否一直在更改他们的代码，或者这个帖子上的其他人是否只是吹毛求疵，但所有这些答案似乎都是错误的，但是如果你把每个答案中正确的部分结合起来，你最终会得到这个对我有用的答案

        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'),
    });

---

我也遇到过类似的问题——令人沮丧的是我会做这样的事情：

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

只有在改变焦点后，它才会呈现我的新占位符文本。不管出于什么原因，selectize可能会对该输入应用一个宽度

最终解决方案：

---

您可以通过设置selectize.settings.placeholder然后调用来更新占位符

$document.readyfunction{ var s=$“输入标签”。选择{ 坚持：错， createOnBlur：没错， 创造：真的， 占位符：“开始占位符” }[0]。选择； $'updatePlaceholder'。单击函数{ s、 settings.placeholder='newplaceholder'； s、 updatePlaceholder； }; }; 选择设置占位符 改变

---

这就是我的工作原理selectize version selectize:^0.12.4并仅使用typescript：

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

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

---

问题还不清楚。你试过什么？有代码片段吗？你是如何更新选项的？空的似乎是必要的。谢谢你指出。这个解决方案对我很有效。对于试图修改未创建的selectize小部件的用户：s=$'select'[0]。selectize；s、 settings.placeholder=新的或修订的占位符；s、 updatePlaceholder。

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

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

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