Select2 与带有自定义标签的 Symfony

Question

我的 senario 是我想要一个 select2 下拉列表，它允许用户 select 多个选项。但是当他们 select 一个选项时，我想让 select 栏显示 selected 项目的缩写。现在我有一个键值数组，其中键是缩写，值是全文。

现在，当我 select 一个选项时，我找不到获取数组的 "original" 键的方法。我也看不到任何与数组键相关的内容。

表格class

 $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>

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

Answer 1

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

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

Select2 与带有自定义标签的 Symfony

Select2 with Symfony with custom tags

symfony

jquery-select2

表格class

查看

Javascript