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格式不正确的选项数据。

当我向控制台输出options变量时，我得到了以下对象，而不是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

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

<pre class="js-pre"></pre>

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

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();

或者您可以使用javascript转换数组，Select2文档说明here如何转换数据：

Select2要求id属性用于唯一地标识   结果列表中显示的选项。如果您使用财产   除了id（例如pk）之外，它还可以唯一地标识一个选项，因此您需要   将您的旧媒体资源映射到ID，然后再将其传递给Select2。

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

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

在您的情况下，将是这样的：

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

  return obj;
});

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
     });

})

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

3 个答案: