Labels within Picklist values

[Anonymous]

Trying to use a Marketo form that would end up with non-selectable labels to help organize a longer picklist.

Functionality is similar to: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

I did try to just put in a label like "DISPLAY|" but it still allows that to be selected.

Any advice is very much appreciated. Unfortunately (but not surprisingly), this was a request for a program that has to launch Monday so not a lot of time and I have a feeling this will end up being a custom form.

Thank you.

[Grégoire_Miche2]

Set this in the standard picklist editor, not in the advanced one.

-Greg

[Anonymous]

So this is likely user error. When I only fill in the Display value on the standard editor, it is auto-populating the Stored Value with the same text.

What am I missing?

[SanfordWhiteman · Accepted solution]

You can't do this with the editor alone, but with the editor + a little JavaScript it's easy.

Set up your options with the "magic word" [OPTGROUP] where you want to start a group:

Then this JS:

MktoForms2.whenReady(function(form) {
  var formEl = form.getFormElem()[0],
    _forEach = Array.prototype.forEach,
    currentOg;
  _forEach.call(formEl.querySelectorAll('SELECT'), function(selectEl) {
    _forEach.call(selectEl.querySelectorAll('OPTION'), function(o, idx) {
      if (o.value == '[OPTGROUP]') {
        (currentOg = document.createElement('OPTGROUP'), currentOg).label = o.textContent;
        selectEl.appendChild(currentOg), selectEl.removeChild(o);
      } else {
        if (currentOg) currentOg.appendChild(o);
      }
    });
  });
});

[Anonymous]

Thank you Sanford Whiteman​.

Hate to even ask, but in terms of a form like this, where would I drop that JS?

Also, is there a way to format the group name using the JS? For instance, if I want to make it bold?

[SanfordWhiteman]

You can put the the script anywhere on the page, after forms2.min.js loads.

<script>
MktoForms2...
</script>

Some browsers will let you format the group name individually, others won't.  You can use styles like this:

OPTGROUP OPTION {     
  color: black;     
  background-color: white; 
} 
OPTGROUP {     
  color: green;     
  background-color: yellow; 
}