[Resolved] Placeholder in Select Fields on Post Forms

[Author]

Posts

[Ed]

I want to add placeholder text in two select (dropdown) fields, on a post form. So far, I've been unable to do this.

[Waqar]

Hi Ed,

Thank you for contacting us and I'll be happy to assist.

The placeholder text attribute can be used with a single or multiline type field, as explained at:
hidden link

If you'd like to include an empty default option in your select (dropdown) field, you can include it in the actual field's settings like shown in this example screenshot: hidden link

In case you had a different requirement in mind, please share some example and also the link to your own page with the post form.

regards,
Waqar

[Ed]

Thank you, Waqar.

This is a "CRED" form, with the options pulled from existing taxonomies. There isn't a way to "add" an empty option.

[Waqar]

Hi Ed,

Thank you for clarifying that.

To insert an empty first select option in the taxonomy dropdown selector field, you can add the following custom script in the "JS editor" tab:
( example screenshot: hidden link )

Note: To access this option, you'll need to turn on the "Expert mode" from the top:
( screenshot: hidden link )

jQuery(document).ready(function($){
   
jQuery("select[name='tax-slug[]']").prepend('<option value="0">- Select -</option>');
jQuery("select[name='tax-slug[]']")[0].selectedIndex = 0;
   
});

Please replace both instances of "tax-slug" with your actual taxonomy's slug.

regards,
Waqar

[Ed]

Thanks, Waqar! That works!

I just had to modify the code as follows (because there were two fields that needed this):

jQuery(document).ready(function($){
jQuery("select[name='resource-type[]']").prepend('<option value="0">- Select -</option>');
jQuery("select[name='resource-type[]']")[0].selectedIndex = 0;
jQuery("select[name='resource-availability[]']").prepend('<option value="0">- Select -</option>');
jQuery("select[name='resource-availability[]']")[0].selectedIndex = 0;
});

[Ed]

My issue is resolved now. Thank you!