We are going to deploy the new yiiframework.com website on March 23, 2018 from 8:00 to 12:00 UTC.
Website and Yii documentation will not be available in this time frame. Check the news for more details.

Yii 1.1: echosen

This extension is a wrapper for Chosen JavaScript plugin which makes select boxes more user-friendly.

EChosen is an extension for Yii framework. This extension is a wrapper for Chosen JavaScript plugin which makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.


  • Yii 1.1 or above (tested on 1.1.8)
  • jQuery or Prototype


Move EChosen folder in your applications extensions folder (default: protected/extensions).

Using extension

Just place the following code inside your view file:

<?php $this->widget( 'ext.EChosen.EChosen' ); ?>

You can also change some default settings:

<?php $this->widget( 'ext.EChosen.EChosen', array(
  'target' => 'select',
  'useJQuery' => false,
  'debug' => true,
)); ?>
  • target jQuery selector for elements to apply this plugin to (default: .chzn-select)
  • useJQuery use jQuery framework on true, Prototype on false (default: true)
  • debug use un-minified .js of plugin (default: false)

You will also need to add chzn-select class to your select elements you want to apply this plugin or if you use jQuery framework you can just change the selector.



Total 20 comments

#10718 report it
kfahmi at 2012/11/19 02:11am

anyone please help me,

i have dropdownlist with echoosen.

it show 200records at once, can i justshow 10 records at first, so if any user want to select another records they can input/ search the name of records.

#10082 report it
Hesam K at 2012/10/03 03:40pm
more features

if anyone needs option adding feature, then checks this out:
git repo
using this, you can enable this extension to accept and add options which are not already in dropdown options. you may get more details and usage from here:
more info on this

#9001 report it
gunnit at 2012/07/12 03:42am
why is it not working ????

ifollowed the steps as described above and as i did for countless extensions but i get this message

Alias "ext.EChosen.EChosen" is invalid. Make sure it points to an existing PHP file.

I fixed the problem , the steps to install it work for the previous version EChosen-1.5.zip

#8932 report it
Daniel at 2012/07/08 06:40pm
Still cannot display "X" echosen 1.5.1


How can I display "X"on single select using echosen?

I tried

<script type="text/javascript"> 


<?php $this->widget('EChosen', array('options' => array('allow_single_deselect' => true))); ?>

Both of them do not show the "X" after an option is selected.



#8146 report it
mtzmedia at 2012/05/13 12:59am

Anyone know how to add icons next to the list items?


#7791 report it
jiaming at 2012/04/18 06:05pm

forgive me if it's a stupid question. Since I'm not familiar with jQuery...

But how can i load the data...?

eg. how can i change the code <?php $this->widget('zii.widgets.CListView', array( 'dataProvider'=>$dataProvider, 'itemView'=>'_view', 'id'=>'modellistview', )); ?>

to apply your plugin...?

#7118 report it
ifdattic at 2012/02/24 09:18am

I added the script position option to the extension.

I will try to check the other issue in the weekend if I have some free time.

#7023 report it
makro at 2012/02/20 03:07am
Version 1.5

It doesn't work for me. Am I wrong? I must delete CClientScript::POS_END from script registrations.

if you register script with same name you can't have single/multiselect/X on same page (see comment #6691)

#6950 report it
yiimann at 2012/02/15 12:03pm

I love this extension, thanks.

#6782 report it
yiimann at 2012/02/05 06:20am

please update chosen to 0.9.7

#6691 report it
makro at 2012/01/29 04:08am
Display the 'X' to clear the field

To display the 'X' to clear the field extension needs to be modified in that way

Extension also needs to be edited in order to obtain select and select-deselect fields on the same page.

Add this to class variables

* @var array native options
public $options = array();

And and then modify run function

public function run()
    // Publish extension assets
    // Get extension for JavaScript file
    if ($this->debug)
    if ($this->useJQuery)
        $options=CJSON::encode($this->options); // <-- HERE
        $cs->registerScript("chosen{$this->target}", "$( '{$this->target}' ).chosen({$options});"); // <-- HERE
#6359 report it
Bruno Piaui at 2012/01/02 08:19pm
Display the 'X' to clear the field

Hello, First I would like to thank the extension ... I'd like to know how to display the 'X' in the dropdown to clear the field? I saw the http://harvesthq.github.com/chosen/ that you can set the attribute 'allow_single_deselect: true' but can not reproduce in the extension. Thanks

#5497 report it
iams at 2011/10/16 10:48pm
select box width

I've discovered that this line in chosen.jquery has something to do with it, if I put a static width in it that's what shows on the page. So it looks like its having issues communicating with the results from yii.

style:"width: "+this.f_width+"px;"}

I could also be totally wrong, the select size is generally determined by the browser, but it appears its 100% and is only stretching as far as the surrounding div which is an incorrect width

#5495 report it
iams at 2011/10/16 01:00pm
select box width extremely small

as someone else mentioned. its smaller in firefox than it is in chrome. It's due to element.style but can't find out what's setting it. setting a default width does not work for everything. I'm guessing its something to do with yii getting the results from the db and the script knowing what to set the size as. Any insight would be appreciated.

#4811 report it
ifdattic at 2011/08/18 01:10pm

You should dig into Chosen plugin (not extension) source code and check if there is an option for a callback after change or select or something like that. As I just made this extension to replace native select boxes and haven't checked all the posibilities of the plugin, as currently I'm working on other stuff.

If there is no option for a callback, you can try to add an on change event to your select input with the code which will update unit and plugin if needed. Or something like that.

#4808 report it
Daniel at 2011/08/18 09:41am
update div based on selection by echosen

Hi Andrew,

Thanks, your solution to my previous question is working as expected. Now another problem, I have a form where the echosen is used for the product name, I wanted to show the unit of the product next to the quantity. The unit is based on the selected product from the echosen. The unit is updated on every changes of the selection of the echosen. Any solution to this problem?

Thanks a lot.

#4773 report it
ifdattic at 2011/08/14 04:55am

You have to run (more info on http://harvesthq.github.com/chosen/):

#4771 report it
javed alam at 2011/08/13 11:43pm
ajax dropdown problem

Thanks for this great extension. i have a little problem, i cannot make it work for dynamic dropdownlist. Regards.

#4768 report it
ifdattic at 2011/08/13 01:08pm

Hi Daniel,

.live won't work as it adds events to elements. What you need to do is add

$( 'select' ).chosen();

after you insert a new select with JavaScript.

Sorry can't explain it in more details, it's just that damn WYMeditor extension sucked out all life from me today, hard to think, you will just have to figure the rest by yourself ;)


#4765 report it
Daniel at 2011/08/13 09:57am
for dropdownList added by javascript, chosen is not shown


I followed zacarria way to add the detail (http://www.yiiframework.com/wiki/141/javascript-tabular-input/), chosen is attached to the first row, next row generated by javascript would not have chosen shown.

I tried to modify the script to use .live, but not working so far.....

Any help?



Leave a comment

Please to leave your comment.

Create extension