SOLVED

Labels within Picklist values

Go to solution
Anonymous
Not applicable

Labels within Picklist values

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.

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Labels within Picklist values

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:

pastedImage_0.png

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);

      }

    });

  });

});

View solution in original post

5 REPLIES 5
Grégoire_Miche2
Level 10

Re: Labels within Picklist values

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

-Greg

Anonymous
Not applicable

Re: Labels within Picklist values

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
Level 10 - Community Moderator

Re: Labels within Picklist values

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:

pastedImage_0.png

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
Not applicable

Re: Labels within Picklist values

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
Level 10 - Community Moderator

Re: Labels within Picklist values

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;

}