css class to option tags

5 messages Options
Embed this post
Permalink
Anders Gunnarsson

css class to option tags

Reply Threaded More More options
Print post
Permalink
Hi

I'm creating a select box, and adding the options using "addMultiOptions".

How can I set CSS Class to the option-tags?

<select>
   <option class="myClass" value="1">1</option>
   <option class="myClass" value="2">2</option>
   <option class="myClass" value="3">3</option>
</select>

regards
Anders
drm-4

Re: css class to option tags

Reply Threaded More More options
Print post
Permalink
Anders Gunnarsson wrote:

> I'm creating a select box, and adding the options using
> "addMultiOptions".
>
> How can I set CSS Class to the option-tags?
>
> <select>
>   <option class="myClass" value="1">1</option>
>   <option class="myClass" value="2">2</option>
>   <option class="myClass" value="3">3</option>
> </select>
Afaik, you can't, but there is really no need if you're going to give
all your options the same class, you could simply give your select a
classname and create a

select.yourclassname option {
    /* ... */
}

css rule
umpirsky

Re: css class to option tags

Reply Threaded More More options
Print post
Permalink
I achieved this with my custom view helper:

<?php
/**
 * Select with custom css helper.
 *
 * @package Forms
 * @author Sasa Stamenkovic <[hidden email]>
 */

/**
 * Select brand helper, options class customization.
 *
 * @package Forms
 */
class Umpirsky_View_Helper_FormSelectCustom extends Zend_View_Helper_FormSelect {
/**
     * Generates 'select' list of options.
     *
     * @access public
     *
     * @param string|array $name If a string, the element name.  If an
     * array, all other parameters are ignored, and the array elements
     * are extracted in place of added parameters.
     *
     * @param mixed $value The option value to mark as 'selected'; if an
     * array, will mark all values in the array as 'selected' (used for
     * multiple-select elements).
     *
     * @param array|string $attribs Attributes added to the 'select' tag.
     *
     * @param array $options An array of key-value pairs where the array
     * key is the radio value, and the array value is the radio text.
     *
     * @param string $listsep When disabled, use this list separator string
     * between list values.
     *
     * @return string The select tag and options XHTML.
     */
    public function formSelectCustom($name, $value = null, $attribs = null, $options = null, $listsep = "<br />\n") {
        return parent::formSelect($name, $value, $attribs, $options, $listsep);
}

  /**
     * Builds the actual <option> tag.
     *
     * Adds custom class.
     *
     * @param string $value Options Value
     * @param string $label Options Label
     * @param array  $selected The option value(s) to mark as 'selected'
     * @param array|bool $disable Whether the select is disabled, or individual options are
     * @return string Option Tag XHTML
     */
    protected function _build($value, $label, $selected, $disable) {
        if (is_bool($disable)) {
            $disable = array();
        }

        $class = 0 === $value ? 'none' : $value;
        $opt = '<option'
             . ' value="' . $this->view->escape($value) . '"'
             . ' class="' . 'car-brand-' . $class . '-icon' . ' car-brand-icon-background"'
             . ' label="' . $this->view->escape($label) . '"';

        // selected?
        if (in_array((string) $value, $selected)) {
            $opt .= ' selected="selected"';
        }

        // disabled?
        if (in_array($value, $disable)) {
            $opt .= ' disabled="disabled"';
        }

        $opt .= '>' . $this->view->escape($label) . "</option>";

        return $opt;
    }
}

Then used it like:

$brand = new Zend_Form_Element_Select(array(
'name' => 'brand',
'class' => 'select-car-brand',
'value' => $request->getParam('brand', 0)
));
$brand->helper = 'FormSelectCustom';
// and add it to my form

In my case I added ' class="' . 'car-brand-' . $class . '-icon' . ' car-brand-icon-background"' class to be same as value, but you can come up with your own.

Hope this helps.

Regards,
Saša Stamenković


On Wed, Oct 28, 2009 at 4:40 PM, drm <[hidden email]> wrote:
Anders Gunnarsson wrote:
I'm creating a select box, and adding the options using "addMultiOptions".

How can I set CSS Class to the option-tags?

<select>
 <option class="myClass" value="1">1</option>
 <option class="myClass" value="2">2</option>
 <option class="myClass" value="3">3</option>
</select>
Afaik, you can't, but there is really no need if you're going to give all your options the same class, you could simply give your select a classname and create a

select.yourclassname option {
  /* ... */
}

css rule

drm-4

Re: css class to option tags

Reply Threaded More More options
Print post
Permalink
Саша Стаменковић wrote:
> class Umpirsky_View_Helper_FormSelectCustom extends
> Zend_View_Helper_FormSelect {
Hi Saša,

Good solution, which I would have suggested if same classes for all the
options wouldn't suffice.

Little suggestion: name your class Umpirsky_View_Helper_FormSelect and
add Umpirsky_View_Helper_ as a plugin namespace to the view helper's
plugin loader, and remove the formSelectCustom() method from the class.
This way you don't have to explicitly refer to your "formSelectCustom"
view helper. Make the setting of the classname an option
(setClassName()) so _build() can delegate to parent::_build() if the
option is not set. This way you can generically implement other class
names for different types of selects in stead of needing more view helpers.

umpirsky

Re: css class to option tags

Reply Threaded More More options
Print post
Permalink
I'll try with plugin namespces, thanks. About having option (setClassName()), I don't see how can you use it, because rendering is initialized and triggered by Zend_Form_Element_Select, maybe you can subclass it, but this leads to complications. Or I'm missing sth?

Regards,
Saša Stamenković


On Thu, Oct 29, 2009 at 4:16 PM, drm <[hidden email]> wrote:
Саша Стаменковић wrote:
class Umpirsky_View_Helper_FormSelectCustom extends Zend_View_Helper_FormSelect {
Hi Saša,

Good solution, which I would have suggested if same classes for all the options wouldn't suffice.

Little suggestion: name your class Umpirsky_View_Helper_FormSelect and add Umpirsky_View_Helper_ as a plugin namespace to the view helper's plugin loader, and remove the formSelectCustom() method from the class. This way you don't have to explicitly refer to your "formSelectCustom" view helper. Make the setting of the classname an option (setClassName()) so _build() can delegate to parent::_build() if the option is not set. This way you can generically implement other class names for different types of selects in stead of needing more view helpers.