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.

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