javascript make select 2使用由外部源设置的URL

Question

我正在使用select2从数据库中挑选游戏，但是，我希望它从中搜索的文件将根据从下拉列表中选择的内容而改变。

我怎么得到它所以select2总是使用最新的“picker_url”？

因此，如果我从页面上的选择框中选择某个选项，它会更改“picker_url”（用于搜索的ajax文件）。问题是，select2似乎只使用原始值。

这是我目前的代码：

    var picker_url = "test1.php";
    $(document).on('change', ".category_select", function(e)
    {
        var id = $(this).val();
        if (id == 16)
        {
            picker_url = "test2.php";
        }
    });

  $(".game_picker").select2({
    selectOnClose: true,
    width: '100%',
    ajax: {
    url: picker_url,
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term // search term
      };
    },
    processResults: function (data) {
      return {
        results: $.map(data, function(obj) {
          return { id: obj.id, text: obj.text };
        })
      };
    },
    cache: true,
  },
  minimumInputLength: 2
  });

Answer 1

在这里找到答案：https://github.com/select2/select2/issues/1679#issuecomment-280080742

var someCondition
ajax: {
  url: function() {
    if (someCondition) {
      return '/api/1/someFile.json'
    } else {
      return '/api/1/someOtherFile.json'
    }
  }
}

Answer 2

我建议使用dynamic-urls，如下面的代码：

$('#mySelect2').select2({
  ajax: {
    url: function (params) {
      return '/some/url/' + params.term;
    }
  }
});

在url内部函数中，你可以测试除params之外的其他变量，如下面的代码片段所示：

$('#category').select2({
  placeholder: "Select category...",
  width: '100%',
});

$('#category').on('select2:select', function(e) {
  var data = e.params.data;
  console.log("category", data);
  categ = e.params.data.id;
});
var categ = "1";

$('#project').select2({
  placeholder: "Select item...",
  width: '100%',
  ajax: {
    type: "GET",
    url: function(params) {
      console.log("ajax func", params, categ);
      var url = 'https://jsonplaceholder.typicode.com/comments?postId=' + categ
      return url;
    },
    cache: true,
    processResults: function(data) {
      return {
        results: $.map(data, function(obj) {
          return {
            id: obj.id,
            text: obj.name
          };
        })
      };
    },
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<div class="group">
  <select id="category">
    <option value="1">cat 1</option>
    <option value="2">cat 2</option>
  </select>
</div>
<br>
<div class="group">
  <select id="project">
    <option value=""></option>
  </select>
</div>

Answer 3

我会保存您的默认选项，然后在需要时通过将新URL扩展为默认选项来重新创建select2：

var defaultOptions = {
  selectOnClose: true,
  width: '100%',
  ajax: {
  url: "test1.php",
  dataType: 'json',
  delay: 250,
  data: function (params) {
    return {
      q: params.term // search term
    };
  },
  processResults: function (data) {
    return {
      results: $.map(data, function(obj) {
        return { id: obj.id, text: obj.text };
      })
    };
  },
  cache: true,
  minimumInputLength: 2
};

//Use default to create first time
$(".game_picker").select2(defaultOptions);

//On change, recreate
$(document).on('change', ".category_select", function(e)
{
    var options = defaultOptions;
    if ($(this).val() == 16)
    {
        //Create a new options object with the url updated
        options = $.extend({}, defaultOptions, { url: 'test2.php' });
    }
    
    //Create a select2 with the desired options
    $(".game_picker").select2(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>