5

我正在服务器端（asp.net mvc4）生成我的 HTML 标签。
我想预先设置我的 HIDDEN 字段的值和描述，以避免 ajax 调用来获取initSelection函数中的数据。

我见过有人使用 javascript 设置值：

$("#select2Test").select2('data', { id: 20832, text: 'LONDON' })

但它仍然需要我额外的代码来实现已经从服务器流式传输到视图模型中的东西。

我想出了这样的事情：

<input type="hidden" id="select2Test" name="select2Test" value="20832" data-option="LONDON" />

我使用了data-option带有查找描述的 HTML5 数据属性，并实现了 initSelection 函数，以便我可以读取字段的值及其数据属性：

initSelection: function (item, callback) {
   var id = item.val();
   var text = item.data('option');
   var data = { id: id, text: text };
   callback(data);
},

我已经看到只有在隐藏字段设置了值时才调用 initSelection。
一切似乎都正常工作。

有没有更好的选择？

4

1 回答 1

14

data-option结合一个习惯initSelection就可以了。

    $("#lookup_id").select2({
        minimumInputLength: 3,
        multiple: false,
        allowClear: true,
        ajax: {
            url: urlFetchCity,
            dataType: 'json',
            type: "POST",
            data: function (term, page) { return { city: term }; },
            results: function (data, page) {
                return {
                    return {results: data};
                };
            }
        },
        initSelection: function (item, callback) {
            var id = item.val();
            var text = item.data('option');
            var data = { id: id, text: text };
            callback(data);
        },
        formatResult: function (item) { return ('<div>' + item.id + ' - ' + item.text + '</div>'); },
        formatSelection: function (item) { return (item.text); },
        escapeMarkup: function (m) { return m; }
    });

对于那些感兴趣的人，我创建了一个GitHub 存储库，您可以在其中找到一个ASP.NET MVC4项目，在该项目中我添加了一个 html 帮助程序来创建一个select2标记，其中包含用于客户端验证的所有功能。

于 2013-05-29T14:42:52.220 回答