我正在使用 Selectize 为内部网站创建下拉菜单和文本输入。我的问题是,只要将 maxItems 设置为 1,Selectize 就会自动将字段变成下拉列表。我希望它具有文本区域外观,并标记新项目。但我不希望它让用户创造不止一种值(value)。下面的代码示例。
代码示例 1:
<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">
<script>
$('#quantitySelect').selectize({
delimiter: ',',
plugins: ['restore_on_backspace'],
create: true,
maxItems: 2,
create: function(input) {
return {
value: input,
text: input
}
}
});
</script>
此代码将创建所需的效果,但最多允许两个项目。由于数量字段应该只允许一个值,我想阻止用户尝试发送两个以上的值。 This code generates the desired look, but undesired functionality.
代码示例 2
<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">
<script>
$('#quantitySelect').selectize({
delimiter: ',',
plugins: ['restore_on_backspace'],
create: true,
maxItems: 1,
create: function(input) {
return {
value: input,
text: input
}
}
});
</script>
这将防止用户尝试发送多个值,但会为输入框提供下拉式外观。 This code generates the desired functionality, but undesired look.
我已经检查了 Selectize 文档,但没有找到任何方法来覆盖此行为。
对 Selectize.js 进行以下更改以实现所需的行为。
// This line is original to Selectize.js.
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
// Add the following code beneath it.
if(self.settings.singleOverride === true){
self.settings.mode = 'multi';
}
现在,如果您将“singleOverride: true”添加到您的 selectize 定义中,它将允许将 maxItems 设置为 1,但 Selectize 仍将以文本输入/标记方式运行。示例如下:
<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">
<script>
$('#quantitySelect').selectize({
plugins: ['restore_on_backspace'],
create: true,
maxItems: 1,
tagType: "TAG_SELECT",
singleOverride: true,
create: function(input) {
return {
value: input,
text: input
}
}
});
</script>
感谢 Mike McCaughan 为我指明了正确的方向。
最佳答案
对 Selectize.js 进行以下更改以实现所需的行为。
// This line is original to Selectize.js.
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
// Add the following code beneath it.
if(self.settings.singleOverride === true){
self.settings.mode = 'multi';
}
现在,如果您将“singleOverride: true”添加到您的 selectize 定义中,它将允许将 maxItems 设置为 1,但 Selectize 仍将以文本输入/标记方式运行。示例如下:
<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">
<script>
$('#quantitySelect').selectize({
plugins: ['restore_on_backspace'],
create: true,
maxItems: 1,
tagType: "TAG_SELECT",
singleOverride: true,
create: function(input) {
return {
value: input,
text: input
}
}
});
</script>
感谢 Mike McCaughan 为我指明了正确的方向。
关于javascript - 当 Maxitem = 1 时,是否可以防止 Selectize 转换为下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36159010/