Add empty <option></option> to <select> in DropDown field [RESOLVED]

Hello experts,
in order to use the Select2 library and its own placeholder option together with GF I need to add an empty <option> before the other options to the <select>-Tag:

<select name="input_1" id="input_1_1" class="gfield_select">
    <option></option>
    <option value="value1">value1</option>
    <option value="value2">value12</option>
</select>

Is there a filter or something else with which I can achieve this?
For your hints many thanks in advance!
Best regards
David

Gravity Forms placeholder setting worked fine without doing changes to the select field when I played with Select2 integration. So I don’t understand really what’s the problem you’re facing.

Anyway, if you add a blank choice to your field in the form editor, you would get the following:

<select name="input_1" id="input_2630_1" class="medium gfield_select" aria-required="true" aria-invalid="false">
	<option value=""></option>
	<option value="First Choice">First Choice</option>
	<option value="Second Choice">Second Choice</option>
	<option value="Third Choice">Third Choice</option>
</select>

If you need to remove value="", try this filter.

That said, here’s a plugin I made to integrate Selectize, which in my opinion works better out of the box and it’s receiving updates more frequently than Select2: https://github.com/samuelaguilera/enhanced-select-for-gravity

You can easily adapt it for Select2 anyway.

1 Like

Wow. Thank you very mich for this profound answer! The solution with the blank choice worked quite well for me. But anyway I will have a closer look at your plugin.

Gravity Forms placeholder setting worked fine without doing changes to the select field when I played with Select2 integration.

It didn’t work for me in the first place. But good to know that it worked for others, so maybe I can get it also working for me.

1 Like