select2 和远程数据：预设值和文本避免服务器往返

Posted 2023-05-07

【中文标题】select2 和远程数据：预设值和文本避免服务器往返

【英文标题】：select2 and remote data: pre-set value and text avoiding server round-trip

【发布时间】：2013-05-11 16:27:06

【问题描述】：

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

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

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

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

我想出了这样的东西：

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

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

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

我发现只有在隐藏字段设置了值时才会调用 initSelection。 一切似乎都正常工作。

还有更好的选择吗？

【问题讨论】：

你在回调中到底在做什么？在加载页面时也加载这些数据不是更好吗？

@Kenneth：我已经更新了我的问题。那里有完整的代码。页面已经加载。我的控制器返回一个视图和一个包含整个数据集的视图模型。

【参考方案1】：

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 repository，您可以在其中找到一个 ASP.NET MVC4 项目，我在其中添加了一个 html 帮助程序来创建一个 select2 标签包含客户端验证的所有功能。

【讨论】：

谢谢！正是我想要的。