Move default content type to bottom of drodown list

Question

I have a list used to request assistance from my team. We have 8 content types for specific types of requests, to ensure we get all the information we need to fulfill requests of those types. We also have a "General Request" content type for everything else, with only the basic fields like Requested By and Target Date, and then a text field to describe what they need. The General Request is the default content type, because none of the more specific forms would be appropriate as a default. However, we have observed that we are starting to get a lot of requests that use the General Request option even when they need one of the other types of assistance, because it's the first option in the list and they don't want to scroll through to look for the "right" option.

I've been asked to move the "General Request" option to the bottom of the list in order to encourage use of the other forms (we're also generating some volumetric reports on the different content types) and to rename it to "Other", but as I mentioned, none of the other content types would be suitable as a default.

Is there a way, perhaps using JavaScript and/or CSS, to place this item at the bottom of the dropdown list without making it no longer be the default content type for the list?

The list is in a web part on our site's home page. InfoPath is not an available option. An approach that can be done with code in a CEWP would be preferable to an SPD-based method, so that other content on the page can continue to be maintained in the browser.

Answer 1

If I understand correctly you want to change

<select>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
<select>

to

<select>
  <option>Two</option>
  <option>Three</option>
  <option>One</option>
<select>

JavaScript can sometimes be confusing, appendChild does actually move elements:

So all you need is:
Selector for for a standard Status Field

var select=document.querySelector("[id^='Status'][id$='DropDownChoice']");
select.appendChild( select.firstChild );

You could go fancy and create an extra option element to make a distinction

<select>
  <option>Two</option>
  <option>Three</option>
  <option disabled>──────────</option>
  <option>One</option>
<select>

Or even fancier and create <optgroup> elements: https://www.w3schools.com/tags/tag_optgroup.asp

Note

Since it is still the Default ContentType it will be listed as the current selected option. Users still won't pick others.

You can't set another to selected as that will be the selected one on save

I would hide the select and display a ChoiceFieldGroup on top, which is lot clearer to users then a DropDown