Question

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

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

用户选择＆＃34; Banana＆＃34;和选择应该返回2作为帖子的值

显而易见的答案当然是将valueField更改为'id'然而会弄乱createFilter，这样就不行了......

我已经对我到目前为止所做的事情做了一个小问题：http://jsfiddle.net/imfpa/Lh3anheq/16/

HTML：

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

的javascript：

function hasOwnPropertyCaseInsensitive(obj, property) {
    var props = [];
    for (var i in obj) if (obj.hasOwnProperty(i)) props.push(i);
    var prop;
    while (prop = props.pop()) if (prop.toLowerCase() === property.toLowerCase()) return true;
    return false;
}

var REGEX = '[a-zA-ZæøåÆØÅ][a-zA-ZæøåÆØÅ ]*[a-zA-ZæøåÆØÅ]';

$('#item-type').selectize({
    persist: true,
    valueField: 'text',
    labelField: 'text',
    searchField: ['text'],
    options: [
        {id: '1', text: 'Apple'},
        {id: '2', text: 'Banana'},
        {id: '3', text: 'Orange'},
        {id: '4', text: 'Cherry'},

    ],    

    createFilter: function(input) {
        var match, regex;

        regex = new RegExp('^' + REGEX + '$', 'i');
        match = input.match(regex);
        if (match) {
        console.log(match[0]);
            return !hasOwnPropertyCaseInsensitive(this.options, match[0]);
        }

        return false;
    },
    create: true
});

Answer 1

jsFiddle demo （http://jsfiddle.net/json/Lh3anheq/35/）

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

您对id的看法是正确的：您只需将valueField: 'text'替换为valueField: 'id'。

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

{
    idOfItem1: {
        id: idOfItem1,
        text: textOfItem1
    },
    idOfItem2: ...
}

以下是Web检查员为console.log(this.options)打印出来的内容：

console output

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

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"
    }
}

请参阅 jsFiddle demo （http://jsfiddle.net/json/Lh3anheq/35/），如果我错过了某些内容，请与我们联系。

从selectize.js获取ID到表单

1 个答案: