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

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