Yii 1.1: yiiselect2

Wrapper Widget to use jQuery Plugin Select2 in Yii application. Recognized by Igor Vaynberg (Creator of Select2)

Wrapper Widget to use jQuery Plugin Select2 in Yii application.

Recognized by Igor Vaynberg (Creator of Select2)

Select2 script: https://github.com/ivaynberg/select2


Yii 1.1.13 (Not tested in others)


In your source code


Or in config

    'import' => array(


    echo Select2::multiSelect("test", null, array('test1','test2'), array(
        'required' => 'required',
        'placeholder' => 'This is a placeholder',
        'select2Options' => array(
            'maximumSelectionSize' => 2,

Or this

    $this->widget('Select2', array(
       'name' => 'inputName',
       'value' => 2,
       'data' => array(
           1 => 'Option 1',
           2 => 'Option 2',
           3 => 'Option 3',
           4 => 'Option 4',


Total 6 comments

#15039 report it
StreetCoder at 2013/10/01 03:35am
Multiple select does not work

Hi Everybody,

I can work with single select but unfortunately couldn't work with multi-select.


<div class="row">
        <?php echo $form->labelEx($model,'item_list'); ?>
        $data = CHtml::listData(Products::model()->findAll(),'id', 'name');
        echo Select2::multiSelect('item_list', $model->item_list, $data, array(
            'required' => 'required',
            'style' => 'width: 270px;',
            'placeholder' => 'Add Products',
            'select2Options' => array(),
        <?php echo $form->error($model,'item_list'); ?>


public function actionCreate()
        $model=new Order;
        // Uncomment the following line if AJAX validation is needed
        // $this->performAjaxValidation($model);
            //echo $model->item_list;
            echo $model->registration_id;

I couldn't receive value in controller. Please help me anybody.


#12694 report it
Daniel at 2013/04/05 09:16pm
generated code


The generated code for select :

an style="margin-top: 10px;" class="span3">
                    <input type="hidden" value="130406030849" id="TransactionDetail_transactionFk" name="TransactionDetail[transactionFk]">                    <select name="TransactionDetail[productFk]" id="TransactionDetail_productFk" placeholder="Barcode" style="width: 100%" class="pull-left">
<option value="">Cari produk...</option>
<option value="2">PANCI [456456456456] </option>
<option value="1">Toples [123123123123] </option>
</select>                </span>

While the javascript generated is

<script type="text/javascript">
jQuery(function($) {
$('#TransactionDetail_productFk').select2({'placeholder':'Barcode','allowClear':true,'createSearchChoice':function(term){ return {id:term, text:term} }});

If I commented createSearchChoice line, the select2 seemed works since I can see the placeholder and the select is a select2 css. But when I uncomment the createSearchChoice, then select2 seemed not applied. Instead a normal select dropdown is applied.

commented/uncommented the allowclear does not give any different result. But both makes the select2 applied.

By meaning select2 is applied, css for dropdown is different in addition to that I can search from the options.

Thanks you for your prompt and continuous support. Anyway, this is a great extension.

#12691 report it
Tonin De Rosso Bolzan at 2013/04/05 11:06am
Verify your generated code

Please verify the generated html script in source code. And contact me in forum.

#12690 report it
Daniel at 2013/04/05 09:47am
still not working.....

I created like this

echo Select2::activeDropDownList(
            $newDetail, 'productFk', Product::model()->getProductOptions(), array(
                        'empty' => 'Cari produk...',
                        'class' => 'pull-left',
                        'style' => 'width: 100%',
                        'placeholder' => 'Barcode',
                        'select2Options' => array(
                            'allowClear' => true,
//                            'createSearchChoice' => 'js:function(term){ return {id:term, text:term} }'

allowClear cannot show the 'X' button next to the selected value.

createSearchChoice makes the Select2 not working, back to only dropdown.

Any help?

#12687 report it
Tonin De Rosso Bolzan at 2013/04/05 09:12am
See ivaynberg.github.com/select2

All options array "select2Options" are passed to the "CJavaScript::encode()" and sent directly to the "$settings" in select2


Porting "allowClear" should work. "createSearchOptions" does not exist try "createSearchChoice"

#12676 report it
Daniel at 2013/04/05 01:23am
Add new option also clear options


How to implement createsearchoptions using this? Also clear options? I used this without success ;(

                    echo Select2::activeDropDownList(
                            $newDetail, 'productFk', Product::model()->getProductOptions(), array(
                        'style' => 'width: 270px;',
                        'placeholder' => 'Barcode',
                        'select2Options' => array(
                            'allowClear' => true,
                            'createSearchOptions' => 'js:function(term){ return {id:term, text:term} }'



Leave a comment

Please to leave your comment.

Create extension