Can I use some pictures instead of plain text in Yii dropdownlist widget?

Question

<?php echo CHtml::dropDownList('listname', $select, array('M' => 'Male', 'F' => 'Female')); ?>

the example in the Yii site only shows how to set the options with plain text. Is there any way to set it with some pictures?

Any help will be appreciated. Best regards!

Answer 1

Dropdownlist generates a select tag in client html, which doesn't support using image as its option.

To use image as the option for a select, you can implement some code like the following:

<div style='position: relative'>
    <div class='usersel'>here to display what user select currently</div>
    <ul style='position: absolute'>
        <li><img src='1.png' /><span>text</span></li>
        <li><img src='2.png' /><span>text</span></li>
        <li><img src='3.png' /><span>text</span></li>
    </ul>
</div>

then use jQuery to catch event mousedown or mouseenter on the outer div, display the inner ul child, and bind click event to li, when li is clicked, set the div.usersel with the selected value.