Multiple select2 form-fields with different placeholders in symfony forms

Question

I am having difficulty creating different placeholders for each form field that work with Select2. My first placeholder is also displayed on any consecutive field, which should have it's own placeholder. A similar question might have been asked before, although I do not completely understand that question, nor does it have an answer.

What I have so far

On my file base.html.twig I included the script of Select2 and have created these few lines of code:

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

In my FormType file, in the form builder I have:

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

The problem is that in a form with two fields like above, the first placeholder is displayed in both fields. So 'first placeholder' will be the placeholder for both fields instead of both fields having their own.

My question: how can I have individual placeholders for each Select2 form field?

Shashank Shashank · Accepted Answer · 2018-07-16T17:41:21

The way you're setting the placeholder is incorrect. Here's why:

You have the data-select attribute set to both the select tags. And as you try to fetch the placeholder text from the data attribute using $('select[data-select="true"]').attr("data-placeholder"), it will always give you the first element with the data-select="true" set which is why you'll see the same placeholders for both the selects.

Here's a snippet using your approach:

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

To fix this, here's one approach (going through the select individually and then setting the placeholder based on the attribute)

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

Hope this helps. (Btw I'm using the JSFiddle snippet that you're referring to in the question)

Multiple select2 form-fields with different placeholders in symfony forms

1 Answers