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:
$( "#category option:first-child" )
- select first child (option in this case) of select menu with id ofcategory
. first-child-selector docsattr("disabled","disabled");
- set disable attribute by jquery.
jQuery attr() Method docs // disable attribute docs
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).
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