How to Disable First option in Form Dropdown (select menu)

When I create a drop down field in a form, I want there to be placeholder text that is NOT selectable.

If you notice on the how did you find us tab, the user is able to select that as an option. How can I make the first option not selectable?

share link> https://preview.webflow.com/preview/fresh-co-54c82e?utm_source=fresh-co-54c82e&preview=a621c256b2f401824d1d27724c996d4c

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Maybe having a label element for the dropdowns?

Thanks for the suggestion. Is there anyway to block the first option with code?

I assume there is, although I’m not a coder myself so I wouldn’t be able to help you with that, sorry.

Solution by code.

Step 1 - Add id

Add id for the select menu (Otherwise by mistake you could disable other options menus). category in this example.

Step 2 - disable first option by code

Copy paste “before body” this code snippet:

<!-- disable first dropdown option -->
<script>
  $( "#category option:first-child" ).attr("disabled","disabled");
</script>

code parts:

Result:

Affect all select menus inside form

general selector (disable all first options of all select menus inside a form).

Copy-paste before body (If the form is part of the footer put this code under site-setting)

<!-- disable form first dropdown option -->
<script>
  $( "form option:first-child" ).attr("disabled","disabled");
</script>

each

One more option/code - add class to select menu and loop (country-select-field class in this example).

image

copy-paste before body:

<!-- disable first select menu option (for country) -->
<script>
  $(".country-select-field").each(function(){
 	  $(this).children().first().attr("disabled","disabled");
  });
</script>

Done :slight_smile:

4 Likes

Hey definitely not following on this. Does this look correct?

What? Be more specific please.

Hi sorry about that, thought I had attached a screenshot of the editor. Not sure if I’m doing this currently or if I followed your instructions precisely. Let me know if the attached screenshot helps.

No. The selector should be “first-child”. No such selector (by select plain text of options) (Your syntax is wrong). Set Your first child with the text “how you find us”.

I will add read-only link if you want.

The read only would be helpful. Thanks!

Hey, just checking in. Can you please provide the read-only link? Thanks!

Clean and readable solution with custom code:

<script>
    // Get the entire dropdown via ID
    let selectionDropdown = document.getElementById("selection-dropdown");
    // Now get its options
    let selectionOptions = selectionDropdown.getElementsByTagName("option");
    // Disable the first one. Make sure that you set the first one as the "read-only" option in the 
    // Webflow-UI
    selectionOptions[0].disabled = true;
</script>

image

1 Like

Hello unquestionably not following on this. Does this look right?

1 Like

I know the request is for disable but I prefer to use hidden because the user will only see valid options the downside is it will force a value once you select an option; depending on your needs this can be a bonus.

This script target multiple selectors instead of one by one.

<script>
/*****************
Suggests to use an id for the main form, so your scope applies only this form. 
If not use only "select" 
*****************/
    
	let selects = document.querySelectorAll("#your-id-form select");

	selects.forEach((select) => { 
		let options = select.getElementsByTagName("option");
		
    options[0].hidden = true;
	});
</script>

This is vanilla javascript but you can use jQuery also.

I’ve used this, and it works for me, but only if it’s only for the first form on the page.
I’ve created separate entries for the other forms, but it only works on whichever is first.

1 Like

Hey @Christopher_Mullan :wave:

I’ve cleaned up the code provided by @RaulRueda. Now it will target select fields using a data attribute instead of an ID. You’re not supposed to have more than one of the same ID, but you can have as many duplicate attributes as you want :+1:

Here’s a link to the project:

And then to the MemberScript #49 to copy the code.

And finally a tutorial. It’s only 44 seconds long