Having multiple option headers/groups?

[toolman]

Hi there,

I have a script that is created in PHP and also Angular. The script creates a form with some options in a select input.

This is an example of one:

    $scope.ethnicgroups = [{
        id: '',
        name: 'Please select'
      }, {
        id: 'White',
        name: 'White'
      },
                            {
        id: 'English, Welsh, Scottish, Northern Irish or British',
        name: 'English, Welsh, Scottish, Northern Irish or British'
      },
                            {
        id: 'Irish',
        name: 'Irish'
      },
                            {
        id: 'Gypsy or Irish Traveller',
        name: 'Gypsy or Irish Traveller'
      },
                            {
        id: 'Any other White background',
        name: 'Any other White background'
      },
                            {
        id: 'Mixed or Multiple ethnic groups',
        name: 'Mixed or Multiple ethnic groups'
      },
                            {
        id: 'White and Black Caribbean',
        name: 'White and Black Caribbean'
      },
                            {
        id: 'White and Black African',
        name: 'White and Black African'
      },
                            {
        id: 'White and Asian',
        name: 'White and Asian'
      },
                            {
        id: 'Any other Mixed or Multiple ethnic background',
        name: 'Any other Mixed or Multiple ethnic background'
      },
                            {
        id: 'Asian or Asian British',
        name: 'Asian or Asian British'
      },
                            {
        id: 'Indian',
        name: 'Indian'
      },
                            {
        id: 'Pakistani',
        name: 'Pakistani'
      },
                            {
        id: 'Bangladeshi',
        name: 'Bangladeshi'
      },
                            {
        id: 'Chinese',
        name: 'Chinese'
      },
                            {
        id: 'Any other Asian background',
        name: 'Any other Asian background'
      },
                            {
        id: 'Black, African, Caribbean or Black British',
        name: 'Black, African, Caribbean or Black British'
      },
                            {
        id: 'African',
        name: 'African'
      },
                            {
        id: 'Caribbean',
        name: 'Caribbean'
      },
                            {
        id: 'Any other Black, African or Caribbean background',
        name: 'Any other Black, African or Caribbean background'
      },
                            {
        id: 'Other ethnic group',
        name: 'Other ethnic group'
      },
                            {
        id: 'Arab',
        name: 'Arab'
      },
                            {
        id: 'Any other ethnic group',
        name: 'Any other ethnic group'
      } ];
   // a pre-selection by value
   $scope.home.quizDatabase.frmethgroup  = '';

   // a pre-selection by object-identity
   $scope.asObject = $scope.ethnicgroups[0];

What I would like to do is have some headers to some of the options in the “Ethnic group” select, similar to this:

I can’t seem to paste all the code as it’s too long.

Can anyone help me create these headers? For example :“White”, " Mixed or Multiple ethnic groups" etc. Also, so they are not selectable? I am not sure how to add other attributes that will be outputted in the HTML of the options.

Thank you

[Erik_J]

Hi,

I guess you want “labels” for option groups in the select list.

Check out Mozilla Dev how to use them:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroupt

[toolman]

Thanks for the reply.

Yes, I think it is the optgroup label that I need to insert into the code.

I have tried something like this, but it doens’t ouput anything:

   id: 'White',
        name: 'White',
        optgroup: 'Title'
      },

I’m guessing this is Angular related?

[Erik_J]

@toolman

I’m guessing this is Angular related?

Probably, I have no clue how to tell Angular to insert optgroups in the list of options.

Hopefully someone with Javascript knowledge can step in, my knowledge was limited to the HTML select element.

[toolman]

I have found this example, but no idea how to incorporate it:

Angular: select list - JSFiddle - Code Playground

This is what my select in the HTML looks like:

              <div class="col-lg-12  col-centered field-container  form-quiz  ethgroup-container">
                <div flex ng-if="home.quizConfig.database.ethgroup" ng-controller="ctrl">
                  <label>{{home.quizConfig.labels.sendGroup}}</label>                   
                  <div class="select is-large">
                  <select id="ethgroup" name="ethgroup" ng-model="home.quizDatabase.frmethgroup" required>
                    <option ng:repeat="ethnicgroup in ethnicgroups" value="{{ethnicgroup.id}}" >{{ethnicgroup.name}}</option>
                  </select>
                </div>

                <div class="err-msg-ar se-err-msg">
                  <div ng-messages="formData.ethgroup.$error" ng-if="formData.$submitted || formData.ethgroup.$dirty || formData.ethgroup.$errors">
                      <div ng-message="required">{{home.quizConfig.labels.requiredField}}</div>
                      <div ng-message="ethgroup">{{home.quizConfig.labels.ethgroupError}}</div>
                  </div>
                </div>
                </div>
              </div>

I’ve tried adding

{
        id: 'White',
        name: 'White',
        group: 'aa'
      },

but nothing happened.