使用 ajax 和 select2 设置数据属性

Posted 2023-05-07

【中文标题】使用 ajax 和 select2 设置数据属性

【英文标题】：set data attributes with ajax and select2

【发布时间】：2017-01-23 17:21:21

【问题描述】：

我正在尝试将数据属性设置为 select2 选项但没有成功，此时我有以下 JS 代码

_properties.$localElement.select2(
    ajax: 
        url: "url",
        type: "POST",
        dataType: 'json',
        delay: 250,
        data: function (params) 
        return 
            name: params.term, // search term
            type: 1
        ;
        ,
        processResults: function (data) 

            return 
            results: $.map(data, function (item) 
                return 
                    text: item.name,
                    source: item.source,
                    id: item.id
                
                )
            ;
        ,
        cache: true
    ,
    //define min input length
    minimumInputLength: 3,

);

我想为选定的选项值设置一个数据源。

【问题讨论】：

那么你的问题是什么？你有什么问题？

以上没有尝试设置（或获取）任何data-* 属性。

我尝试使用 resultTemplate 选项定义选项模板并在该输入上设置数据属性，但即使选择了正确的选项，该选项也没有设置自定义属性。

请提供更多信息，我们可以提供帮助。

我不明白这个问题的反对意见，我认为 OP 已经明确定义了他试图实现的目标和期望。这在我的情况下帮助了我，谢谢 Rubem。 +1

【参考方案1】：

我找到了解决方案，看起来 resultTemplate 没有格式化“视觉”选择的选项，需要使用 templateSelection 选项：

    templateSelection: function(container) 
        $(container.element).attr("data-source", container.source);
        return container.text;
    

【参考方案2】：

您实际上可以使用您已经使用过的确切语法。 “source-attribute”只需要通过特定select2-option的data().data.source访问即可。

所以保持你的 processResults 函数像你一样：

processResults: function (data) 
   return 
      results: $.map(data, function (item) 
         return 
            text: item.name,
            source: item.source,
            id: item.id
         
      )
   ;
,

如果你想检索所选选项的来源，你可以这样做：

var selectedSelect2OptionSource = $("#idOfTheSelect2 :selected").data().data.source;

事实上，你可以在你的 processResults 函数中设置任何你想要的变量，然后通过 data().data.variableName 选择它！

【参考方案3】：

我解决了这个问题。

$('select').on('select2:select', function (e) 
    var data = e.params.data;
    $("select option[value=" + data.id + "]").data('source', data.source);
    $("select").trigger('change');
);