jQuery UI Widgets Forums Lists DropDownList Mixing standalone options with option groups

This topic contains 1 reply, has 2 voices, and was last updated by  Christopher 7 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • tmcneill
    Participant

    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


    Christopher
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.