如何使selectize.js选择框需要一个值？

Question

我原来的选择框已设置了required属性

<select name="some-name" value="initialValue" required>
     <option value="initialValue">initial value</option>
     <option value="otherValue">other value</option>
</select>

我开始选择：

$("select[name='some-name']").selectize()

但是，用户仍然可以使用退格键来删除选定的选项，使得选择框具有值'' 。

由于实际选择框上的required似乎不会影响Selectize，因此，我已经阅读了selectize文档，但是找不到阻止用户删除该选项的任何方法。

如何防止用户将值设置为有效选项以外的任何值？

Answer 1

使用“ 选择无删除”效果很好。 由于我使用npm：

var Selectize = require('selectize');

// https://github.com/akrikos/selectize-no-delete/blob/master/src/selectize-no-delete.js
Selectize.define('no-delete', function(options) {
  this.deleteSelection = function() {};
});

然后，当您创建一个selectize实例时：

$("select[name='country-code']").selectize({
    plugins: {
        'no-delete': {}
    },
    ....
})

Answer 2

您可以检查删除选项时是否选中了小于1的选项（如果已添加）。 getValue（）返回当前选定值的数组。

对于用户来说，它看起来就像是不可删除或不可移动的。

var userSelectize = $(...).selectize({});
userSelectize[0].selectize.on("item_remove", function(value, item) {
            if (userSelectize[0].selectize.getValue().length < 1) {
                this.addItem(value);
            }
    });