I want to render a select that have options label like this:
<span style="color: green;">(1) Green</span>
The problem is that when the drop down list is rendered, it render the plain text and not the html so I see: <span style="color: green;">(1) Green</span>
How can I do it?
It’s probably a CSS issue. Try putting “!important” after your color. Defintiely look at the rendered code and cs.
One of the options you send in the htmlOptions collection controls the encoding of the label:
encode: boolean, specifies whether to encode the values. Defaults to true. This option has been available since version 1.0.5.
Lookup CHtml::dropdownList and CHtml::listOptions (where the above is listed).
I know, I know, the problem is that it doesn’t work.
It is possible that it is working, but that the input is already encoded when it receives it.
What version of Yii are you running?
Show us the line where you setup the dropdownlist.
i’m using the last svn version.
In the view:
<div class="simple">
<?php echo CHtml::activeLabelEx($toDo, 'priorityId' ); ?>
<?php echo CHtml::activeDropDownList( $toDo, 'priorityId', $user->getPriorityList(), array( 'encode' => false, 'options' => array( $user->config->priorityId => array('selected' => true) ) ) ); ?>
</div>
$user->getPriorityList():
public function getPriorityList() {
$objList = $this->prioritys;
$c = count($objList);
$i = 0;
$priorityList = array();
while ( $i < $c ) {
$p = $objList[$i];
$priorityList[$p->priorityId] = '<span style="color: '.$p->hexValue.';">('.$p->priorityValue.') '.$p->priorityLabel.' </span>';
$i++;
}
return $priorityList;
}
Rendered:
<select id="Config_priorityId" name="Config[priorityId]">
<option value="6">(0) Black </option>
<option value="7">(1) Green </option>
<option value="8">(2) Purple </option>
<option selected="selected" value="9">(3) Blue </option>
<option value="10">(4) Red </option>
</select>
If I set ‘encode’ => false It will render <span style=“color: green;”>(1) Green</span> in the label with plain text. I want it rendered with its own color 
I suggest going into the framework source, and adding a var_dump before and after the following lines in CHtml.php:
public static function activeDropDownList($model,$attribute,$data,$htmlOptions=array())
{
self::resolveNameID($model,$attribute,$htmlOptions);
$selection=$model->$attribute;
var_dump($data);
$options="\n".self::listOptions($selection,$data,$htmlOptions);
var_dump($options);
self::clientChange('change',$htmlOptions);
if($model->hasErrors($attribute))
self::addErrorCss($htmlOptions);
if(isset($htmlOptions['multiple']))
{
if(substr($htmlOptions['name'],-2)!=='[]')
$htmlOptions['name'].='[]';
}
return self::tag('select',$htmlOptions,$options);
}
This should help you track down where the transformation is taking place.
Let me understand a thing… It’s a problem of my solution or maybe it can be a bug inside CHtml?
Can’t really tell - that’s why I suggest adding those var_dump’s.
This is what is printed:
The name of each color is printed with each color. So (1) Green is GREEN!
This is the html under the above print( I used firebug to see it )
It seems like two things are being done at the same time that shouldn’t be.
making a pair id/value for each option
formatting the option according to it’s value
I’ve made some modifications to the code.
In the view:
<div class="simple">
<?php echo CHtml::activeLabelEx($toDo, 'priorityId' ); ?>
<?php echo CHtml::activeDropDownList( $toDo, 'priorityId', $user->priorityFull, array( 'encode' => false, 'options' => $user->getPriorityList() ) ); ?>
</div>
$user->getPriorityFull():
public function getPriorityFull() {//this function allows you to access $model->priorityFull as an attribute
return "($this->priorityValue) $p->priorityLabel";
}
$user->getPriorityList():
public function getPriorityList() {//this function returns the options for the (dropdown)list
$objList = $this->prioritys;
$c = count($objList);
$i = 0;
$priorityList = array();
while ( $i < $c ) {
$p = $objList[$i];
$priorityList[$p->priorityId] = array ("style"=>"color: '$p->hexValue';");
$i++;
}
return $priorityList;
}
Rendered:
<select id="Config_priorityId" name="Config[priorityId]">
<option value="6" style="color:...">(0) Black </option>
<option value="7" style="color:...">(1) Green </option>
<option value="8" style="color:...">(2) Purple </option>
<option value="9" style="color:...">(3) Blue </option>
<option value="10" style="color:...">(4) Red </option>
</select>