Eselect2 - How Can I Access The Value Using Javascript?

I am trying to access the selected value of the ESelect2 extension and display it and use it with javascript when a button is clicked

ESelect2


echo CHtml::textField('cas', '', array('class' => 'span5'));

$this->widget('ext.select2.ESelect2', array(

      'selector' => '#cas',

      'options' => array(

      'placeholder' => 'Search Code',

      //'minimumInputLength' => 1,

      'ajax' => array(

      'type' => 'GET',

      .

      .

      .

Alert Button


echo CHtml::button("(+)",array('title'=>"Topic",'onclick'=>'js:var data = $("#cas").select2("data"); alert(data.text);'));

Using the code above, the alert popup box is empty. I really appreciate any help with this.

I resolved the issue I was having. The issue was with the ‘results’ option in the ajax array. Apologies, I should have posted all the code.

New working code:




            echo CHtml::textField('cas', '', array('class' => 'span5','style' => 'min-width:150px;'));


            $this->widget('ext.select2.ESelect2', array(

                'selector' => '#cas',

                'options' => array(

                    'placeholder' => 'Search Code',

                    //'minimumInputLength' => 1,

                    'ajax' => array(

                        'type' => 'GET',

                        'url' => $this->createUrl('xyz/AutoComplete',array('modelid'=>$model->id,'itemtype'=>'Cas')),

                        'dataType' => 'json',

                        'data' => 'js: function(term, page) {

                            return {

                                term: term,                           

                            };

                        }',

                        'results' => 'js: function(data){                    

                            return {

                                results :

                                data.map(function(item) {

                                    return {

                                        id : item.id,

                                        text : item.value

                                    };

                                }

                            )};

                        }',

                    ),

                    'formatResult' => 'js:function(movie){  

                        return movie.id + "  " + movie.text;

                    }',

                    'formatSelection' => 'js: function(movie) {

                        return movie.text;

                    }',

                ),

            ));

            ?>

Before the fix, I had the following for the ‘results’ option.




                        'results' => 'js: function(data){

                            return {results: data};

                        }',