MFSelector - multi-formatting select tag options

This is a solution to the desire to have <select> drop down lists with its <option> elements have flexible formatting in their text.

The class will create a mimic of any chosen <select>, hiding the original and pushing selected values into the original when changes are made to the mimic, triggering any onchange events that may be attached to the original.

Also handles <optgroup>'s if included.

Pros

1. allows multi-formatted select options
2. enabled placeholder text for select (without necessarily being part of the options list)
3. automatically collects style of original <select>
4. automatically positions the new drop-down list popup depending on the size and position and space availability
5. triggers onChange events attached to the original <select>
6. more CSS control of styles for <option>'s and <optgroup>'s

Cons

1. drop-down list popup is a fixed position div that cannot exist outside of the browser/frame, and so can never be exactly the same as a natural <select>
2. slightly different width decisions from natural selects
3. the drop down arrow will be different from the native arrow (which varies between operating systems)

Implementation

To implement :

1. include the mf-styled-selector.js and mf-styled-selector.css

html  ::  local installation

<script src="../js/mf-styled-select.js"></script>
<link href="../css/mf-styled-select.css" rel="stylesheet preload prefetch" as="style">

or

html  ::  methodfish.com reference

<script src="https://methodfish.com/Download/MFSelector/files/latest/js/mf-styled-select.js"></script>
<link href="https://methodfish.com/Download/MFSelector/files/latest/css/mf-styled-select.css" rel="stylesheet preload prefetch" as="style">

2. include the mf-select class on any <select>'s that want to apply.
3. use the special simplified markdown language on <option> entries to control the formatting required for the values; it is also advisable to include the mf-invisible class on your <select> to avoid the pre-formatted value from being visible before it's ready.

<select class='mf-select mf-invisible'>
  <option>ABC {col .red}DEF{/col}</option>
  <option>HIJ {col .blue}KLM{/col}</option>
  <option>xyz ///italic///</option>
  <option>123 **bold**</option>
  <option>{col #c81fd3}#c81fd3{/col}</option>
  <option>{col red}color:red{/col}</option>
</select>

error_outline{/col} Note, if you have any CSS that references your select items (e.g. through select {... '> or specifically pointing at the id of a <select> e.g. #myselect then you will need to make adjustments to use the mf-select instead).

Markdown Options

The special simplified MD includes:

Example html

 html

<select class='mf-select mf-invisible' placeholder='{col grey}-Select an option-'>
    <optgroup label='group1'>
       <option>Lorem **ipsum**</option>
       <option>dolor sit amet</option>
    </optgroup>
    <optgroup label='group2'>
       <option>consectetur {col .myclass}adipiscing elit{/col}</option>
       <option>**Sed eget** libero sit</option>
     </optgroup>
</select>

By default, on window load, the class will be initiated, but if necessary you can call this manually using the init() function after the .mf-select classes have been put on the DOM:

 javascript

new mfSelector().init();

Extending the MD

Note, the provide MD here is limited but can be extended if desired by declaring your own MD handler to return your desired markup.

 javascript

function myMDConverter(tx) {
   return tx.replace(/_(.*?)_/g, "<u>$1</u>");
}
new mfSelector().init(myMDConverter);