【问题标题】：Select2 with Symfony with custom tags带有自定义标签的 Symfony 的 Select2
【发布时间】：2019-10-14 13:29:13
【问题描述】：

我的情况是我想要一个 select2 下拉菜单，它允许用户选择多个选项。但是当他们选择一个选项时，我希望选择栏显示所选项目的缩写。现在我有一个键值数组，其中键是缩写，值是全文。

现在，当我选择一个选项时，我找不到获取数组“原始”键的方法。我也看不到任何与数组键相关的东西。

表单类

 $builder->add('relations', ChoiceType::class, [
    'choices' => [
        'isp' => 'Internet service provider',
        'db' => 'Database'
    ]);

查看

{{ form_row(form.relations) }}

Javascript

<script>
    $(document).ready(function() {
        $('#form_relations').select2({
            closeOnSelect : false,
            placeholder : "Placeholder",
            allowHtml: true,
            allowClear: true,
            multiple: true
        });
    });    
</script>

现在，当您选择一个选项时，它只会使用数组的值，但是我想使用缩写。我尝试记录选定的选项，但这似乎不包含数组的键。我还尝试查看 symfony 返回视图的数组，它似乎用增量索引替换键而不是保留我自己的。有没有办法确保 symfony 保留我自己的密钥并在使用 select2JS 选择选项时使用这些密钥？

【问题讨论】：

标签： symfony jquery-select2

【解决方案1】：

解决方案应该是为您的选项设置一个额外的数据属性。为此，您应该使用 object 来设置您的选择。所以让我们先添加一个新的 Option 类：

namespace App\Model;

class MyOption 
{
    private $name;
    private $abbreviation;

    public function __construct($name, $abbreviation) {
        $this->name = $name;
        $this->abbreviation = $abbreviation;
    }

    function getName() {
        return $this->name;
    }

    function getAbbreviation() {
        return $this->abbreviation;
    }
}

现在在您的 formType 中创建您的下拉列表，如下所示：

use App\Model\MyOption;

public function buildForm(FormBuilderInterface $builder, array $options) 
{
    $builder->add('relations', ChoiceType::class, [
        'choices' => [
            new MyOption('Internet service provider', 'isp'),
            new MyOption('Database', 'db'),
        ],
        'choice_label' => function(MyOption $option, $key, $value) {
            return $option->getName();
        },
        'choice_attr' => function(MyOption $option, $key, $value) {
            return ['data-abbreviation' => $option->getAbbreviation()];
        },
    ]);

}

结果会是这样的：

<select id="product_option_relations" name="product_option[relations]">
    <option value="0" data-abbreviation="isp">Internet service provider</option>
    <option value="1" data-abbreviation="db">Database</option>
</select>

接下来，您将能够使用例如 jQuery 获得选定的缩写：

$("#product_option_relations").find(':selected').data('abbreviation');

【讨论】：