堆棧內存溢出
  簡體   English   中英

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

[英]How to change placeholder of selectize.js dropdown?

 原文  2013-10-02 17:44:41  3   10    javascript/ jquery/ dynamic/ placeholder/ selectize.js

問題描述

當父下拉列表更改其選擇以加載要更改其占位符的下拉列表的選項時，我想更改selectize.js創建的下拉列表的占位符。 在文檔中沒有方法可以做到這一點。

10 個解決方案

解決方案1
 13  2015-04-15 03:20:51

初始化時，可以將placeholder鍵指定為選項對象的一部分。 我在文檔中找不到該選項，只發現它在挖掘代碼。 

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

解決方案2
 9  2015-04-17 12:49:36

你需要兩件事：

  • 添加空<option></option>作為select中的第一個選項標記。
  • 添加placeholder鍵以selectize調用

解決方案3
 6 已采納  2016-02-06 09:43:51

不確定選擇是否繼續改變他們的代碼，或者如果這個帖子上的其他人都只是嗤之以鼻，但所有這些答案似乎都是錯誤的，但是如果你把每個答案中的正確部分結合起來，你最終會對我有用。 

        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
 2  2013-11-11 23:29:19

您可以通過在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
 1  2014-11-14 03:20:25

請確保您使用的是select標記為selectize 。
我遇到了同樣的問題，而不是使用輸入。 selectize工作，但placeholder屬性沒有顯示。 當我改為select它開始工作 

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

解決方案6
 1  2015-07-30 12:28:47

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

解決方案7
 0  2014-09-02 09:34:09

selectize.js將在select下面創建一個input 。 此input將具有類.selectize-control 。

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

你可以這樣做： 

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

如果您想要一個有效的示例，我需要有關您的代碼的更多信息。

解決方案8
 0  2016-04-27 05:44:32

我有一個類似的問題 - 令人沮喪的是我會做這樣的事情： 

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

然后，只有在更改焦點后，它才會呈現我的新占位符文本。 事實證明，無論出於何種原因（可能是一個好的），選擇都會對此輸入應用寬度。

最終解決方案 

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

解決方案9
 0  2017-03-17 23:21:44

您可以通過設置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>

解決方案10
 0  2018-11-22 10:53:56

這對我有用（選擇版本"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();

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何清除selectize.js下拉列表 將占位符文本添加到 plotly 小部件中的 selectize.js 下拉菜單 下拉列表中的鏈接Selectize.js selectize.js重新加載下拉列表 selectize.js 占位符寬度問題 如何清除 Selectize.js 下拉列表中的選定值？ 如何禁用 selectize.js？ 移動中selectize.js下拉菜單溢出的困難 在selectize.js中禁用下拉列表的選項 使用 Flask 填充 Selectize.js 下拉列表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM