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属性获取占位符文本时，它将始终为您提供第data-select="true"个元素集，这就是为什么两个选择都将看到相同的占位符的原因

以下是使用您的方法的摘要：

$('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代码段）

在symfony表单中具有不同占位符的多个select2表单域

1 个答案: