Comment ajouter des classes CSS à l'option Zend_Form_Element_Select

Question

J'essaie d'ajouter une classe CSS à une option Zend_Form_Element_Select, mais je n'arrive pas à trouver un moyen de le faire.

La sortie souhaitée serait quelque chose comme ceci:

<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> 

Mais je deviens ceci:

<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> 

Je ne peux pas sembler passer un attribut de classe CSS à l'une des options dans l'élément select bien que je puisse styliser l'élément select itselft.

Mon code:

$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...); 

Après avoir étudié un peu j'ai découvert que Element_Select ne dispose pas d'une méthode pour ajouter des styles CSS aux options dans la zone de sélection, seulement pour lui-même sélectionner.

Alors, comment puis-je les ajouter? Dois-je étendre le formulaire_element_select? Ou un décorateur personnalisé suffirait-il? Quelqu'un peut-il me donner un indice? Je suis déconcerté avec ça.

Merci d'avance!

Answer 1

Ceci est en effet pas possible mais déjà demandé à être mis en œuvre:

Voir

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

Answer 2

Vous pouvez l'ajouter avec JavaScript, en particulier jQuery. Cela aura pour effet que l'arrière-plan de la liste déroulante sélectionnée sera coloré.

<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

En forme:

<?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()) 
; 

bibliothèque de fichiers/GLX/Forme/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 
} 

?> 

fichier application/views/helpers/glxFormSelect.php ou d'une bibliothèque/GLX/Afficher/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; 
    } 
} 

?> 

Et final HTML res Code ULT (padding-left plus de style):

<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

$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;