如何更改 selectize.js 下拉菜单的占位符？
Posted
技术标签:
【中文标题】如何更改 selectize.js 下拉菜单的占位符？【英文标题】：How to change placeholder of selectize.js dropdown? 【发布时间】：2013-10-09 05:12:44 【问题描述】：当父下拉列表更改其选择以加载要更改占位符的下拉列表的选项时，我想更改由 selectize.js 创建的下拉列表的占位符。文档中没有这样做的方法。
【问题讨论】：
问题不清楚。你试过什么？任何代码sn-ps？您如何更新选项？ 【参考方案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%;");
【讨论】：
以上是关于如何更改 selectize.js 下拉菜单的占位符？的主要内容，如果未能解决你的问题，请参考以下文章
selectize.js 不发送所有选定的选项，但只发送最后一个