Mixing standalone options with option groups

[tmcneillParticipant]

I’m trying to create a dropdown structured something like this:

<select id="provinces">
  <option value="">None</option>
  <optgroup label="United States">
      <option value="us-AL">Alabama</option>
      <option value="us-AK">Alaska</option>
  </optgroup>
  <optgroup label="Canada">
      <option value="ca-AB">Alberta</option>
      <option value="ca-BC">British Columbia</option>
  </optgroup>
  <option value="-">Other</option>
</select>

Notice that the ‘None’ and ‘Other’ options are not included as part of a group. Is there currently a way to create this using jqxDropDownList?

I’ve tried creating a select tag like the on above and initializing from it. However, the standalone options don’t appear. The only options are the ones that are part of a group.

I’ve also tried initializing from a div like this:

<div id='provinces'></div>

source = [
  {
    value: '',
    label: 'None'
  },
  {
    value: 'us-AL',
    label: 'Alabama',
    group: 'United States'
  },
  {
    value: 'us-AK',
    label: 'Alaska',
    group: 'United States'
  },
  {
    value: 'ca-AB',
    label: 'Alberta',
    group: 'Canada'
  },
  {
    value: 'ca-BC',
    label: 'British Columbia',
    group: 'Canada'
  },
  {
    value: '-',
    label: 'Other'
  }
];

$('#provinces').jqxDropDownList({
  source: source,
  valueMember: 'value',
  displayMember: 'label'
});

In this case, both the ‘None’ and ‘Other’ options appear at the beginning of the list under a group named ‘Group’. Although the options at least appear now, putting them in a group is still undesirable behavior.

Thank you for any help you can give

[ChristopherParticipant]

Hi tmcneill,

what you are trying to accomplish isn’t possible because you are setting a ‘group’ property to some of the elements in your ‘source’ variable. That means you need a ‘group’ property for all of them, not just some. However there’s a workaround by setting some string value(the values must differ or both elements will be placed in the same group) for the ‘group’ property like this:
http://jsfiddle.net/zvoLqg0d/

After that you can apply some stylings, for example a ‘margin-left’ property of some value to the <span> elements in the divs to make them look like the way you want to.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts