Jquery Select2，如何在 on(change) 函数中访问 ajax 数据？

Posted 2023-05-07

【中文标题】Jquery Select2，如何在 on(change) 函数中访问 ajax 数据？

【英文标题】：Jquery Select2, how to access ajax data at on(change) function?

【发布时间】：2013-02-12 15:56:48

【问题描述】：

我将 Select2 与 ajax 一起使用。 一切正常，当用户点击他们想要的项目时，我使用文档指定的 on(change) 函数来做一些事情。

  $("#e6").on("change", function(e)           
        $('input#Destination').val(e.val); 
          );

);

返回值 (e.val) 是来自 ajax 调用的 data.id 值，但我的数据对象有“name”、“id ”和“类型”。

我可以向 dataFormatSelection() 添加代码，但这听起来不合逻辑并且令人困惑。

     function dataFormatSelection(data) 
    console.log(data.name + "|" data.id + "|" + data.type);
     return data.name;
 

如何在 on("change".. 事件中访问整个 data 对象（而不仅仅是 data.id）？

【参考方案1】：

$("#e6").on('change', function(e) 
    // Access to full data
    console.log($(this).select2('data'));
);

【讨论】：

这样，数据不是最新的，选中的值没有被标记为选中。要使用 ES6 获取选定的值，请执行 $input.select2('data').find(item => item.element.selected)。使用 Select 2 v4.0.12 测试

【参考方案2】：

根据Select2 docs更改事件应该有3个属性：事件对象包含以下自定义属性：

val：当前选择（考虑到改变的结果）——id或id数组 add：添加的元素，如果有的话 - 完整的元素对象，而不仅仅是 id removed：被移除的元素，如果有的话 - 完整的元素对象，而不仅仅是 id

还有例子：

$("#e11").select2(
    placeholder: "Select value ...",
    allowClear: true,
    data: [id: 0, text: 'story',id: 1, text: 'bug',id: 2, text: 'task']
);

$("#e11_2").select2(
    placeholder: "Select value ...",
    multiple: true,
    data: [id: 0, text: 'story',id: 1, text: 'bug',id: 2, text: 'task']
);

$("#e11").on("change", function(e)  
    console.log(JSON.stringify(val:e.val, added:e.added, removed:e.removed)); 
).on("open", function()  
    console.log("open"); 
);

$("#e11_2").on("change", function(e)  
    console.log(JSON.stringify(val:e.val, added:e.added, removed:e.removed)); 
).on("open", function()  
    console.log("open"); 
);

但我注意到added 和removed 属性仅在multiple: true 开启时出现。我不知道这是设计使然还是错误。无论如何我都会报告它，因为绝对需要在更改时使用所选元素。

【参考方案3】：

我有疑问... 如何获取控制台日志中显示的值并使用它？

如果我采用这些值并将每个值放入一个 var 中是否正确？ 因为如果我对创建的任何 var 使用 console.log(var)，则会显示该值，但如果执行 alert(var)，则永远不会显示警报。

我需要使用 AJAX 调用 php 函数时选择的选项的值。

$("#e11").on('change', function(e) 
   //I create a var data and works it like an Array
   var data = $(this).select2('data');
   //Then I take the values like if I work with an array
   var value = data.id;
   var text = data.text;
   //If I use console.log(var) the values are displayed but not with an alert

谢谢！！！

【讨论】：

我认为你应该创建一个新问题，这是一个不同的问题

$(this).select2('data') 会返回一个数组，所以你应该通过data[Index].id访问它