Yii- In Dependent Dropdownlist Second Dropdownlist Values Getting Displayed In Logs But Not In Widget

I’m new to Yii framework and Javascript. Now, I’m using two dropdownlists for min_cost and max_cost. I’m using the below code to list the values in the dropdownlist.




    <?php 

                        $this->widget('ext.combobox.EJuiComboBox', array(

                        'model' => $model,

                        'attribute' => 'min_cost',

                        'data' => Yii::app()->params['cost_min_resales'],

                        'options' => array(

                        'onSelect' => 'cost_change(item.value);',

                       'allowText' => false,

                        ),     

                        'htmlOptions' => array('placeholder' => 'Min Cost', 'style'=>'width:70px'),

                    ));

                                    

                    ?>






    <?php 

                $this->widget('ext.combobox.EJuiComboBox', array(

                    'model' => $model,

                    'attribute' => 'max_cost',

                    'data' =>Yii::app()->params['cost_max_resales'],

                    'options' => array(                    

                        'allowText' => false,

                        

                    ),

                    

                    'htmlOptions' => array('placeholder' => 'Max Cost', 'style'=>'width:70px'),

                ));                       

    ?>



For this I’m using the below script:




    <script>

     

    

        function cost_change(price) {

            var removed;

        console.log("removed",removed);

           select = "#SearchForm_max_cost_select";

            var value = price;

            console.log("value",value);

            jQuery('#SearchForm_max_cost_select').prepend(removed);

            var toKeep = jQuery('#SearchForm_max_cost_select option').filter( function( ) {

                return parseInt(this.value) > parseInt( value);

            } );

        

            console.log("to keep",toKeep);

            removed =  jQuery('#SearchForm_max_cost_select option').filter( function( ) {

                return parseInt(this.value) < parseInt( value);

            } );

        

            

        }

        </script>  



Now, I want to populate the second dropdownlist with values greater than the value selected in first one. Suppose there are values hardcoded in an array as (1,2,3,4,5) I select 2 from first dropdownlist then all values greater than 2 (i.e 3,4,5) should be listed in second dropdownlist.

The above script works fine. I can see the values of second dropdownlist printed in the logs . But, I’m not able to pass this values to second dropdownlist. How can I do this.

Hi

Just try the following template… i hope this should work . cheers





		        		$('#SearchForm_max_cost_select').empty();


				$('//Here pass the filtered array (i.e)(3,4,5)').each(function() {

		        			var newopt = $('<option />'); 

	                    	newopt.text($(this).html());

	                    	$('#SearchForm_max_cost_select').append(newopt);

		        		});



Below is the image of the object I’m getting when I select value .

Hello Chandran,

I added the template you posted now, the second dropdown is not opening

Below is the modification I made :




<script>

 


function cost_change(price) {

    var removed;

console.log("removed",removed);

   select = "#SearchForm_max_cost_select";

    var value = price;

    console.log("value",value);

    jQuery('#SearchForm_max_cost_select').prepend(removed);

    var toKeep = jQuery('#SearchForm_max_cost_select option').filter( function( ) {

        return parseInt(this.value) > parseInt( value);

    } );


    console.log("to keep",toKeep);

    removed =  jQuery('#SearchForm_max_cost_select option').filter( function( ) {

        return parseInt(this.value) < parseInt( value);

    } );

 jQuery('#SearchForm_max_cost_select').empty();


                                jQuery('toKeep').each(function() {

                                                var newopt = jQuery('<option />'); 

                                newopt.text(jQuery(this).html());

                                jQuery('#SearchForm_max_cost_select').append(newopt);

                                        });

    

}

</script>




Hi

Can you just tell me…

where is the array?

what are the values of these variable

var value // why are you assigning price to value… u can use directly price… why this intermediate variable

var removed; // this is undefined

select = “#SearchForm_max_cost_select”; // what this line means ???

var toKeep // what is the output of this variable

removed [size=2]// what is the output of this variable[/size]

[size=2]

[/size]

var jsArray = new Array();

here fill the array

(i.e)jsArray = tokeep; // because here tokeep is just variable

$.each(jsArray, function( index, value ) {

	        			var opt = &#036;('&lt;option /&gt;'); 


	                    opt.val(value); 


	                    opt.text(value); 


	                    &#036;('#SearchForm_max_cost_select').append(opt);


					});

Chandran,

Values are stored in the array and this array is accessed using


 Yii::app()->params['cost_min_resales']

The array is stored in main.php.

var removed and value was used for clarity and I will delete it later when everything works fine. Now, toKeep object variable output is shown in the above figure.

Please see the below picture for the contents of toKeep

[color="#1C2837"][size="2"]Hi,[/size][/color]

[size="2"][color="#1c2837"]

[/color][/size]

[color="#1c2837"]

[size="2"]var jsArray = new Array();[/size]

[size="2"]here fill the array[/size]

size="2"jsArray = tokeep; // because here tokeep is just variable[/size]

[size="2"]

[/size]

[size="2"]$.each(jsArray, function( index, value ) {[/size]

[size=“2”]var opt = $(’<option />’); [/size]

[size="2"]opt.val(value); [/size]

[size="2"]opt.text(value); [/size]

[size=“2”]$(’#SearchForm_max_cost_select’).append(opt);[/size]

[size="2"]}); [/size]

[size="2"]

[/size][/color][color="#1C2837"][size="2"]Then try this … it should work[/size][/color][color="#1C2837"] [/color]

[color="#1C2837"][size=“2”]cheers :)[/size][/color]

[color="#1C2837"][size="2"]Hi[/size][/color]

[color="#1C2837"][size="2"]If tokeep is having array of options then use like this[/size][/color]

[size="2"][color="#1c2837"]





$.each(jsArray, function( index, value ) {

     $('#SearchForm_max_cost_select').append($this);

});



[/color][/size]