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?
Thank you!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
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.
Add id for the select menu (Otherwise by mistake you could disable other options menus). category in this example.
Copy paste “before body” this code snippet:
<!-- disable first dropdown option -->
<script>
$( "#category option:first-child" ).attr("disabled","disabled");
</script>
code parts:
$( "#category option:first-child" ) - select first child (option in this case) of select menu with id of category. first-child-selector docsattr("disabled","disabled"); - set disable attribute by jquery.Result:
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>
One more option/code - add class to select menu and loop (country-select-field class in this example).
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 
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>
Hello unquestionably not following on this. Does this look right?
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.
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 
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
