Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

How can I add classes to a form option tag without JS? At the moment in Form API I can pass a keyed array like this

array(
  '0' => 'option 0',
  '1' => 'option 1',
)

and I'll get html like this

<option value="0">option 0</option>
<option value="1">option 1</option>

Is there a way to do something like this:

array(
  array(
    'value' => 0,
    'text' => 'option 0',
    'class' => 'bob 0',
  ),
  array(
    'value' => 1,
    'text' => 'option 1',
    'class' => 'bob 1',
  ),
)

and then get this

<option value="0" class="bob 0">option 0</option>
<option value="1" class="bob 1">option 1</option>
share|improve this question
    
I like this question. Upvoted for theming righteousness. –  Lester Peabody May 9 '12 at 15:53

2 Answers 2

Unfortunately this isn't very easy using the Form API currently.

There's an issue open to add this functionality (it goes all the way back to 2008) that would theoretically allow you to do something like this:

$form['optiontest'] = array(
  '#type' => 'select',
  '#title' => t('Option test'),
  '#options' => array(
    array(
      '#return_value' => 0,
      '#value' => t('First option'),
      '#attributes' => array('class' => 'first', 'title' => t('First option')),
    ),
    array(
      '#value' => t('Option group'),
      '#attributes' => array('class' => 'group', 'title' => t('This is an optgroup')),
      '#options' => array(
        array('#return_value' => 2, '#value' => t('1st sub-option')),
        array('#return_value' => 4, '#value' => t('2nd sub-option')),
      ),
    ),
  ),
);

But unfortunately there are nothing but failed patches attached to the issue at the moment.

The only way I can think of to do it at the moment would be to add a #process function to the select element, and add the class(es) to each option when they're broken down individually.

share|improve this answer
up vote 3 down vote accepted

So I wasn't able to get the fully flexible option done but here is a way to add classes to the options tag based on the option value. It works but overriding the theme_select function to use my own version of form_select_options

// theme_select
function THEME_select($variables) {
  $element = $variables['element'];
  element_set_attributes($element, array('id', 'name', 'size'));
  _form_set_class($element, array('form-select'));
  return '<select' . drupal_attributes($element['#attributes']) . '>' . THEME_form_select_options($element) . '</select>';
}

/**
 *
 * @param type $element
 * @param type $choices
 * @return string 
 */
function THEME_form_select_options($element, $choices = NULL) {
  if (!isset($choices)) {
    $choices = $element['#options'];
  }
  // array_key_exists() accommodates the rare event where $element['#value'] is NULL.
  // isset() fails in this situation.
  $value_valid = isset($element['#value']) || array_key_exists('#value', $element);
  $value_is_array = $value_valid && is_array($element['#value']);
  $options = '';
  foreach ($choices as $key => $choice) {
    if (is_array($choice)) {
      $options .= '<optgroup label="' . $key . '">';
      $options .= THEME_form_select_options($element, $choice);
      $options .= '</optgroup>';
    }
    elseif (is_object($choice)) {
      $options .= THEME_form_select_options($element, $choice->option);
    }
    else {
      $key = (string) $key;
      if ($value_valid && (!$value_is_array && (string) $element['#value'] === $key || ($value_is_array && in_array($key, $element['#value'])))) {
        $selected = ' selected="selected"';
      }
      else {
        $selected = '';
      }
      $options .= '<option class="' . drupal_clean_css_identifier($key) . '"  value="' . check_plain($key) . '"' . $selected . '>' . check_plain($choice) . '</option>';
    }
  }
  return $options;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.