Как добавить CSS классы в опцию Zend_Form_Element_Select

Question

Я пытаюсь добавить класс CSS к опции Zend_Form_Element_Select, но я просто не могу найти способ сделать это.

Желаемый результат будет примерно таким:

<select name="hey" id="hey">
    <option value="value1" style="parent">label1</option>
    <option value="value2" style="sibling">sublabel1</option>
    <option value="value3" style="sibling">sublabel2</option>
    <option value="value4" style="parent">label2</option>
    <option value="value5" style="sibling">sublabel3</option>
    <option value="value6" style="sibling">sublabel4</option>
</select>

Но я получаю это:

<select name="hey" id="hey">
    <option value="value1">label1</option>
    <option value="value2">sublabel1</option>
    <option value="value3">sublabel2</option>
    <option value="value4">label2</option>
    <option value="value5">sublabel3</option>
    <option value="value6">sublabel4</option>
</select>

Кажется, я не могу передать атрибут класса CSS какой-либо опции в элементе select, хотя я могу стилизовать элемент select itselft.

Мой код:

$sel = new Zend_Form_Element_Select('hey');
$sel->setRequired(true)->setLabel('Select an Option:');
$sel->addMultiOption('value1', 'label1', array('class' => 'parent'))
    ->addMultiOption('value2', 'sublabel1', array('class' => 'sibling')) (etc...);

После небольшого исследования я обнаружил, что Element_Select не имеет метода для добавления стилей CSS к параметрам в поле выбора, только для самого выбора.

Итак, как я могу их добавить? Должен ли я расширить form_element_select? Или подойдет индивидуальный декоратор? Кто-нибудь может дать мне подсказку? Я озадачен этим.

Заранее спасибо!

Answer 1

$htmlEgressCss='<style>';
$multiOptions = array("" => "All");
$resEg = $this->commonDB->getEgressTrunk();
while ($row = $resEg->fetch()) {
    if($row['IsActive']==0){
        $htmlEgressCss .= '.egressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlEgressCss.='</style>';
$this->addElement(
        'select',
        'cmbEgressTrunk',
        array(
            'multiOptions' =>$multiOptions,
        )
    );
$html = '<form><div>'.$this->cmbEgressTrunk .'</div></form>'.$htmlEgressCss;

Answer 2

Вы можете добавить его с помощью Javascript, в частности, JQuery. Это приведет к тому, что фон выпадающего списка будет окрашен.

<style type="text/css">
    .t1 {background: red; color:#fff;}
</style>
<form>
    <select id="test">
        <option value="abc">ABC</option>
        <option value="123">123</option>
        <option value="foo">Foo</option>
    </select>

</form>

<script type="text/javascript">
$('#test [value*="abc"]').addClass('t1');
$('#test [value*="foo"]').addClass('t1');
</script>

Answer 3

В форме:

<?php

require_once 'glx/Form/Element/Select.php'; // custom select class

// ... in init or __create function :

$categories = new Model_DbTable_Categories(); // some Model

$PID = new glx_Form_Element_Select('PID'); // custom select object

$PID
  ->setLabel('PID')
  ->setDecorators(array('ViewHelper'))
  ->addMultiOptions($categories->getSelectOptions())
;

Файловая библиотека / glx / Form / Select.php:

<?php

require_once 'Zend/Form/Element/Multi.php';

$error_reporting = error_reporting(0);
@include_once '../application/views/helpers/glxFormSelect.php'; // first, maby here
if (! class_exists('Zend_View_Helper_glxFormSelect'))
  require_once 'glx/View/Helper/glxFormSelect.php'; // or least, maby here
error_reporting($error_reporting);

class glx_Form_Element_Select extends Zend_Form_Element_Multi
{
  public $helper = 'glxFormSelect'; // this is my custom code
}

?>

Файл приложения / views / helpers / glxFormSelect.php или библиотека / glx / View / Helpe / glxFormSelect.php:

<?php

require_once 'Zend/View/Helper/FormElement.php';

class Zend_View_Helper_glxFormSelect extends Zend_View_Helper_FormSelect
{
    public function glxFormSelect($name, $value = null, $attribs = null, $options = null, $listsep = "<br />\n")
    {
      return parent::formSelect($name, $value, $attribs, $options, $listsep);
    }

    protected function _build($value, $label, $selected, $disable)
    {
        if (is_bool($disable))
            $disable = array();

        $oldLabel = $label;                                                   // this is my custom code
        $label = ltrim($label);                                               // this is my custom code

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

        if (($countSpaces = strlen($oldLabel) - strlen($label)) > 0)          // this is my custom code
          $opt.= sprintf(' style="padding-left:%dpx"', (15 * $countSpaces));  // this is my custom code

        if (in_array((string) $value, $selected))
            $opt .= ' selected="selected"';

        if (in_array($value, $disable))
            $opt .= ' disabled="disabled"';

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

        return $opt;
    }
}

?>

И окончательный HTML-код результата (добавлен стиль с отступом влево):

<select name="PID" id="PID">
<option value="1" label="Categories" style="padding-left:15px">Categories</option>
<option value="2" label="Publications" style="padding-left:30px">Publications</option>
<option value="83" label="Links" style="padding-left:45px">Links</option>
...

Answer 4

Это действительно невозможно, но уже запрошено к реализации:

См.

• http://framework.zend.com/issues/browse/ZF-8684