symfony 表单中具有不同占位符的多个 select2 表单字段

Question

我很难为使用 Select2 的每个表单域创建不同的占位符。我的第一个占位符也显示在任何连续的字段上，应该有它自己的占位符。一个类似的问题可能是asked before，尽管我不完全理解这个问题，也没有答案。

我目前所拥有的

在我的文件base.html.twig 中，我包含了 Select2 的脚本并创建了这几行代码：

<script>
    $('select[data-select="true"]').select2({
        placeholder: $('select[data-select="true"]').attr("data-placeholder")
    });
</script>

在我的 FormType 文件中，在我的表单构建器中：

->add('firstEntity', EntityType::class, [
    'class' => firstEntity::class,
    'multiple' => true,
    'attr' => ['data-select' => 'true', 'data-placeholder' => 'first placeholder'] 
])
->add('secondEntity', EntityType::class, [
    'class' => secondEntity::class,
    'multiple' => true,
    'attr' => ['data-select' => 'true', 'data-placeholder' => 'second placeholder'] 
])

问题在于，在具有上述两个字段的表单中，第一个占位符显示在两个字段中。所以'first placeholder' 将是两个字段的占位符，而不是两个字段都有自己的。

我的问题：如何为每个 Select2 表单域设置单独的占位符？

Answer 1

您设置占位符的方式不正确。原因如下：

您将data-select 属性设置为select 标记。当您尝试使用 $('select[data-select="true"]').attr("data-placeholder") 从数据属性中获取占位符文本时，它将始终为您提供带有 data-select="true" 集的第一个元素，这就是为什么您会看到两个选择的占位符相同的原因。

这是使用您的方法的 sn-p：

$('select').each(function () {
	$(this).select2({
  	placeholder: $('select[data-select="true"]').attr("data-placeholder"),
    allowClear: true
  })
});

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

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<p>Select0 >>>base simple
    <br>
    <select style="width:300px" id="select0" class="populate placeholder" data-select="true" data-placeholder="first placeholder">
        <option></option>
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>Select1 >>> with link
    <br>
    <select style="width:300px" id="select1" class="populate placeholder second" data-select="true" data-placeholder="second placeholder">
        <option></option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </select>
    <p id="log"></p>

要解决这个问题，这里有一种方法（单独进行选择，然后根据属性设置占位符）

$('select').each(function () {
	$(this).select2({
  	placeholder: $(this).data('placeholder') || $(this).attr('data-placeholder'),
    allowClear: true
  })
});

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

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<p>Select0 >>>base simple
    <br>
    <select style="width:300px" id="select0" class="populate placeholder" data-select="true" data-placeholder="first placeholder">
        <option></option>
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>Select1 >>> with link
    <br>
    <select style="width:300px" id="select1" class="populate placeholder second" data-select="true" data-placeholder="second placeholder">
        <option></option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </select>
    <p id="log"></p>

希望这会有所帮助。 （顺便说一句，我正在使用您在问题中提到的 JSFiddle sn-p）