Streaming live at 10am (PST)

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:

Update october 19

If you have more than one select field in a page (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

Please change the Q title to:
How to Disable First option in Form Dropdown (select menu)

For future searches about this topic.

1 Like

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

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