Question

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

Answer 1

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

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

Answer 2

你需要两件事：

在选择中添加空<option></option>作为第一个选项标记。
将placeholder密钥添加到selectize来电

Answer 3

不确定选择是否继续改变他们的代码，或者如果这个帖子上的其他人都只是嗤之以鼻，但所有这些答案似乎都是错误的，但是如果你把每个答案中的正确部分组合在一起你最终会结合这个为了我。

        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

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

<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

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

<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 会在input下方创建select。此input将包含班级.selectize-control。

您可以使用jQuery替换此placeholder字段的input。

您可以执行以下操作：

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

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

Answer 8

我有一个类似的问题 - 令人沮丧的是我会做这样的事情：

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

然后只有在更改焦点后才能渲染我的新占位符文本。事实证明，无论出于何种原因（可能是一个好的选择），选择都会在此输入中应用宽度。

最终解决方案：

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

Answer 9

您可以通过设置 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>

Answer 10

这对我有用（选择版本"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();

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

10 个答案: