Javascript 从selectize.js获取表单ID

我正试图在我的网站上设置一个表单，并希望使用一些动态下拉列表

我找到了Selectize.js，这似乎是一个很好的解决方案，但是当我发布表单时，我很难找到如何从所选选项获取ID

如中所示，用户选择香蕉和selectize应该为帖子返回2作为值

显而易见的答案当然是将valueField更改为'id'，但是这会弄乱createFilter，所以这是不可能的

到目前为止，我已经对我所拥有的做了一个简单的介绍：

HTML:

<form>
    <select id="item-type" placeholder="Choose type...">
    </select>
</form>

好的，根据我们在上面评论中的讨论，您希望selectize.js返回所选项目的id，并允许用户创建唯一的项目

关于id您是对的：您只需要将valueField:'text'替换为valueField:'id'

现在我们需要修复函数hasownPropertyCaseSensitive中的决策。 此函数中的第一个参数是对象的对象。如果看到控制台输出，对于selectize元素的this.options，您将大致看到以下结构valueField已在此处替换为id：

以下是web检查器为console.logthis.options打印的内容：

因此，我们可以迭代所有对象，并且字段文本中仍然有显示值，这正是我们需要与用户输入进行唯一性比较的字符串

function hasOwnPropertyCaseInsensitive(options, userValue) {
    var exists = false;

    for (var option in options) {
        if (options.hasOwnProperty(option)) {
            if (options[option].text.toLowerCase() === userValue.toLowerCase()) {
                exists = true;
                break; // break from the loop when the match is found. return true works as well.
            }
        }   
    }

    return exists;
}

注意！用户创建的元素id将与显示值相同。也就是说，如果我在列表中添加一个新元素，例如Test，它将如下所示：

{
    Test: {
        id: "Test",
        text: "Test"
    }
}

---

请查看，如果我遗漏了什么，请告诉我。

1。看不到id如何破坏createFilter。2.认为select应该指定name属性。3.你的正则表达式可以用[a-zA-ZæååÆØ]{2}大大简化，如果我没有弄错你的意图，你会检查最小长度2吗？谢谢你的简化正则表达式-是的，我打算检查最小长度2。createFilteris的问题是，如果我将ValueField更改为id-由于我不知道的原因，它将始终返回true，从而破坏了过滤器，该过滤器应该只允许用户创建列表中不存在的值。也许我缺少了一些东西，但是，如果允许的值已经在列表中，为什么要让用户创建新值呢？这正是我的观点！我不想允许用户创建列表中已有的值。。但是如果您将valueField更改为id，它将允许用户这样做，这正是我想要避免的。这就是为什么我在我的帖子中写道，更改ValueField是一个禁忌，我不是selectize.js的专家，但是如果你不想让用户创建新项目，你只需要删除create:true默认为false，并删除createFilter。这正是你所需要的。非常感谢你：这就是诀窍——谢谢你提供了非常翔实的解释。

function hasOwnPropertyCaseInsensitive(options, userValue) {
    var exists = false;

    for (var option in options) {
        if (options.hasOwnProperty(option)) {
            if (options[option].text.toLowerCase() === userValue.toLowerCase()) {
                exists = true;
                break; // break from the loop when the match is found. return true works as well.
            }
        }   
    }

    return exists;
}

{
    Test: {
        id: "Test",
        text: "Test"
    }
}