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

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

2013-10-02 freezer

這個問題不清楚。你有什麼嘗試？任何代碼片段？你如何更新選項？ – uKolka

不知道，或者其他人在此線程只是whiffed，但所有這些問題的答案似乎是錯的分別，但如果你客氣了把每個答案中的正確部分與適合我的這個結合起來。

 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-06 09:43:51 oasisfleeting

您可以通過在選擇標記內添加一個空的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>

來源

2013-11-11 23:29:19 Meti

需要在父代更改時動態完成。 – freezer

selectize.js將創建select低於input。這input將有類.selectize-control。

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

你可以這樣做：

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

如果你想工作的例子，生病需要你的代碼的更多信息。

來源

2014-09-02 09:34:09

確保您使用的select標記。
我遇到了相同的問題，而不是使用輸入引起的。 selectize也工作，但placeholder屬性未顯示。當我改爲select它開始工作

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

來源

2014-11-14 03:20:25 Erandros

的選項部分初始化對象時，可以指定一個placeholder關鍵。我無法在文檔中找到該選項，只能通過代碼進行挖掘。

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

來源

2015-04-15 03:20:51 johnz0r

你需要兩樣東西：

加空3210在選擇第一個選項標籤。
添加placeholder關鍵selectize呼叫如果selectize不斷改變他們的代碼

來源

2015-04-17 12:49:36 MikDiet

空似乎是必要的。感謝您指出。 – Liz

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

來源

2015-07-30 12:28:47

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

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

那麼只有改變焦點後，將會使我的新佔位符文本。事實證明，無論出於何種原因（可能是一個好的選擇），選擇應用一個寬度到這個輸入。

最終的解決方案：

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

來源

2016-04-27 05:44:32

您可以通過設置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="[email protected]" 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-17 23:21:44 JayChase

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

回答

相關問題