使用 select2 将 php 数组转换为 javascript 数组

Question

我在名为$salaries的 laravel 变量中有以下 php 数组，该变量传递给刀片视图：

array:4 [▼
   2 => "£8, Per hour"
   3 => "£10, Per hour"
   23 => "Up to £10000, Per annum"
   24 => "£10,000 - £15,000, Per annum"
]

在我的刀片视图中，我有一个下拉菜单，当更改时，我想加载一个带有上述选项的 select2 下拉菜单。 下面是我的代码：

$(document).on("change", ".js-selector", function() {

     var options = {!! json_encode($salaries) !!};

     $("#salary_list").empty().select2({
        data: options
     });

})

但是，没有任何内容被加载到下拉列表中。 因此，我将其范围缩小到 select2 的选项数据格式不正确。

当我 output 选项变量到控制台时，我得到以下 object 而不是 javascript 数组？

{2: "£8, Per hour", 3: "£10, Per hour", 23: "Up to £10000, Per annum", 24: "£10,000 - £15,000, Per annum"}

如何将选项转换为 select2 数据的正确格式？

Answer 1

您必须将数据转换为正确的格式，在这里您可以看到正确的数据格式：

var data = [
    {
        id: 2,
        text: '£8, Per hour'
    },
    {
        id: 3,
        text: '£10, Per hour'
    }
];

您可以将正确格式的数组传递给视图，例如：

$salaries = \App\Models\Salary::all(); // eloquent collection

$salaries = $salaries->map(function ($salary) {
    return ['id' => $salary->id, 'text' => $salary->text];
})->toArray();

它会产生这样的结果：

array:1 [▼
  0 => array:2 [▼
    "id" => 2
    "text" => "£8, Per hour"
  ]
  0 => array:2 [▼
    "id" => 3
    "text" => "£10, Per hour"
  ]
]

或者您可以在 javascript 中转换数组，Select2 文档在此处解释了如何转换数据：

Select2 要求 id 属性用于唯一标识结果列表中显示的选项。 如果您使用 id 以外的属性（如 pk）来唯一标识选项，则需要先将旧属性 map 传递给 id，然后再将其传递给 Select2。

如果您无法在您的服务器上执行此操作，或者您处于无法更改 API 的情况，您可以在将其传递给 Select2 之前在 JavaScript 中执行此操作：

var data = $.map(yourArrayData, function (obj) {
  obj.id = obj.id || obj.pk; // replace pk with your identifier

  return obj;
});

在你的情况下，它会是这样的：

$(document).on("change", ".js-selector", function() {

    var options = {!! json_encode($salaries) !!};

    var data = $.map(options, function (value, key) {
        return {id: key, text: value};
    });

    $("#salary_list").empty().select2({
        data: data
    });

})

Answer 2

您的数组必须具有如下结构：

[
   [
        'id' => 2,
        'text' => "£8, Per hour"
   ],
   [
        'id' => 3,
        'text' => "£10, Per hour"
   ],
   [
        'id' => 23,
        'text' => "Up to £10000, Per annum"
   ],
   [
        'id' => 24,
        'text' => "£10,000 - £15,000, Per annum"
   ],
]

https://select2.org/data-sources/arrays

Answer 3

正如 Serhii 所说，只需在编码之前从关联数组中提取值：

$(document).on("change", ".js-selector", function() {

     var options = {!! json_encode(array_values($salaries)) !!};

     $("#salary_list").empty().select2({
        data: options
     });

})