如何更改 selectize.js 下拉菜单的占位符？答案

【问题标题】：How to change placeholder of selectize.js dropdown?如何更改 selectize.js 下拉菜单的占位符？
【发布时间】：2013-10-09 05:12:44
【问题描述】：

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

【问题讨论】：

问题不清楚。你试过什么？任何代码sn-ps？您如何更新选项？

标签： javascript jquery dynamic placeholder selectize.js

【解决方案1】：

您可以在初始化时将placeholder 键指定为选项对象的一部分。我在文档中找不到该选项，只是在挖掘代码时发现它。

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

【讨论】：

这还不够，需要添加第一个选项项

【解决方案2】：

你需要两件事：

添加空<option></option>作为选择中的第一个选项标签。
将placeholder 键添加到selectize 调用

【讨论】：

空的似乎是必要的。感谢您指出。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以通过在 select 标记内添加一个空的 option 元素来为 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>

【讨论】：

【解决方案5】：

确保为selectize 使用select 标签。
我遇到了同样的问题，这是由使用输入引起的。 selectize 也有效，但 placeholder 属性未显示。当我更改为select 时，它开始工作了

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

【讨论】：

【解决方案6】：

您可以通过设置 selectize.settings.placeholder 并调用 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>

【讨论】：

【解决方案7】：

这对我有用（选择版本"selectize": "^0.12.4" 并仅使用打字稿）：

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

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

【讨论】：

这个解决方案对我来说效果很好。对于那些试图修改他们没有创建的选择小部件的人：s = $('select')[0].selectize; s.settings.placeholder = "new or revised placeholder"; s.updatePlaceholder()。

【解决方案8】：

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

【讨论】：

【解决方案9】：

selectize.js 将在select 下方创建一个input。这个input 将拥有.selectize-control 类。

你可以用jQuery替换这个input字段的placeholder。

你可以这样做：

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

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

【讨论】：

【解决方案10】：

我遇到了类似的问题 - 令人沮丧的是我会这样做：

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

只有在改变焦点后它才会呈现我的新占位符文本。事实证明，无论出于何种原因（可能是一个好的原因），selectize 都会对这个输入应用一个宽度。

最终解决方案：

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

【讨论】：