Question

我正在尝试将设置数据属性放入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,

});

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

Answer 1

我找到了解决方案，看起来结果模板不会格式化＆＃34; visual＆＃34;选择的选项，需要使用templateSelection选项：

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

Answer 2

我解决了这个问题。

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

Answer 3

您实际上可以使用已经使用的确切语法。只需通过特定select2选项的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！选择它！

使用ajax和select2设置数据属性

3 个答案: