12

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

4

10 回答 10

18

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

//init selectize
$(function() {
  $('select').selectize({
    placeholder: 'Click here to select ...',
  });
});
于 2015-04-15T03:20:51.883 回答
13

你需要两件事：

  • 在选择中添加空<option></option>作为第一个选项标签。
  • 添加placeholder键selectize调用
于 2015-04-17T12:49:36.553 回答
9

不确定 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'),
    });
于 2016-02-06T09:43:51.710 回答
2

您可以通过在 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>
于 2013-11-11T23:29:19.650 回答
2

确保select为selectize.
我遇到了同样的问题，这是由使用输入引起的。selectize也可以，但是placeholder没有显示该属性。当我更改为 aselect它开始工作

<select type="text" placeholder="Type words of the article..."></select>
于 2014-11-14T03:20:25.717 回答
2

这对我有用（选择版本"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();
于 2018-11-22T10:53:56.187 回答
2

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

于 2017-03-17T23:21:44.673 回答
1 
$('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});
于 2015-07-30T12:28:47.977 回答
0

selectize.js将input在select. 这input将有类.selectize-control。

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

您可以执行以下操作：

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

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

于 2014-09-02T09:34:09.903 回答
0

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

$("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%;");
于 2016-04-27T05:44:32.570 回答