将参数传递给 jQuery 的 select2 ajax 调用

Posted 2023-05-07

【中文标题】将参数传递给 jQuery 的 select2 ajax 调用

【英文标题】：passing parameters to jQuery's select2 ajax call

【发布时间】：2012-11-18 05:43:17

【问题描述】：

我正在尝试将一个额外的参数传递给 select2 中的 ajax 调用：

  $(".auto-sug").select2(
    width:'element',
    minimumInputLength:2,
    ajax: 
        url: "/action/get-custom.php",
        data: function (term, page) 
          return 
              q: term, // search term
              page_limit: 10
          ;
        ,
        results: function (data, page) 
            return results: data.stuff;
        
    
  );

其实我想给ajax调用传递另一个参数...元素本身的id

<input type="text" class="auto-sug" name="custom" id="3383" />

但是，我无法弄清楚如何实际访问元素的 id (3383) 或页面上的任何其他值。

【问题讨论】：

你好。 .select2 方法是什么？这真的有效吗？这是你正在使用的吗？ github.com/ivaynberg/select2/blob/master/select2.js

是的。对不起。忘记发布链接了。

好吧，看起来这个插件没有本机 onChange 事件处理程序...根据我对文档的快速回顾：ivaynberg.github.com/select2/#documentation。您无法获取 id 的原因是因为 select2 方法需要一种在选择值时提取 id 属性的方法。你试过其他代码了吗？

现在我考虑得更多了，将 ajax 方法从构造函数中取出并执行类似 $(".auto-sug").on('change', function() var inputData = $(this).select2("data"); var inputId = $(this).prop('id'); 把你的ajax方法和inputData和inputId一起放在这里);

【参考方案1】：

假设有多个元素的类为auto-sug，你可以试试这样：

$(".auto-sug").each(function() 
    var thisId = this.id;
    $(this).select2(
        ...
        ajax: 
            ...
            id: thisId,
        ,
    );
);

【讨论】：

你将如何访问元素的任何数据属性？

在.each()的回调中，你应该可以使用$(this).data(key)。

谢谢，我有无法通过的数据属性。它总是无法理解旧的，我不能像 attr('data-attribute') 这样调用，所以这是适合我的情况的最佳方法。

@sjy，谢谢，一个优雅的解决方案。我花了两个小时才找到这个线程。我必须使用 $( this ).attr( 'id' ) 来获取 ID。

@sjy 没用，你能尝试发布完整的例子吗？也许错过了什么。

【参考方案2】：

您应该在 data 函数而不是根 ajax 中传递该额外参数，以便在您每次发出请求时执行：

ajax: 
    url: "/action/get-custom.php",
    data: function (term, page) 
      return 
          q: term, // search term
          anotherParm: whatEverValue, //Get your value from other elements using Query, for example.
          page_limit: 10
      ;

然后，要获取当前 select2 的 id，您可以将 whateverValue 替换为 $(this).data(key)

【讨论】：

您能否更新您的答案，显示在哪里使用 $(this).data(key)？

这实际上很有帮助，但请使用生成的查询字符串更新答案：?q=term&anotherParm=whatEverValu&page_limit=10

这应该是认可的答案；在 data 函数中传递它会使请求运行得更快。即使在处理庞大的数据集时，您也可以删除刚刚做出的选项并实时做出另一个选择。

将anotherParm 移动到数据函数对我来说就像一个魅力。当我阅读接受的答案时，虽然它对我有用，但至少与我试图完成的事情一样，它没有意义（我的用例与 OP 不完全一样，所以请带着这个评论一粒盐）。

【参考方案3】：

您可以在此处添加新参数。

 data: function (params) 
        ultimaConsulta = params.term;
        localidad = $("#idOcultoLocalidad").val(); //this is the anotherParm
        return 
            criterio: params.term, // search term
            criterio2: localidad,
        ;
    ,