Combobox Generating A Hidden Dropdown Selection List

I’m new to Yii framework and not much experienced in PHP. Now, I created dependent dropdownlists using a Yii extension


EJuiComboBox

. I used the below code to create the two dropdownlists min and max.




<?php       

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

                    'model' => $model,

                    'attribute' => 'min',

                    // data to populate the select. Must be an array.

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

                    // options passed to plugin

                    'options' => array(

                        'allowText' => false,

                    ),

                    // Options passed to the text input

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

                ));

               

                //echo $form->dropDownList($model,'city', Yii::app()->params['city'], array('style'=>'width:120px'));

                ?>

<?php

        

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

                    'model' => $model,

                    'attribute' => 'max',

                    // data to populate the select. Must be an array. 

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

                    // options passed to plugin

                    'options' => array(

                        'allowText' => false,

                    ),

                    // Options passed to the text input

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

                ));

               

                //echo $form->dropDownList($model,'city', Yii::app()->params['city'], array('style'=>'width:120px'));

                ?>



I want to use the below Javascript code to make it work as dependent dropdownlists.




<script>

// Keep a copy of the default options

var $options = $('#SearchForm_min_cost_select').children().clone();




$('#SearchForm_min_cost_select').change(function(){

// Within your change handler:


var index = $(this).find(':selected').index();

$('#SearchForm_max_cost_select').html($options).children(':lt('+index+')').remove();


});

</script>



I can’t use it as the widget is generating HTML which is hidden.




<select id="SearchForm_min_select" style="display: none;">

<option value="0"></option>

<option value="10 ">10 </option>

<option value="20 ">20 </option>

<option value="30 ">30 </option>

<option value="40 ">40 </option>

<option value="50 ">50 </option>

<option value="60 ">60 </option>

<option value="70 ">70 </option>

</select>


<select id="SearchForm_max_select" style="display: none;">

<option value="0"></option>

<option value="10 ">10 </option>

<option value="20 ">20 </option>

<option value="30 ">30 </option>

<option value="40 ">40 </option>

<option value="50 ">50 </option>

<option value="60 ">60 </option>

<option value="70 ">70 </option>

</select>



How can I do with this widget to make that Javascript work or make the HTML code not hidden. Should I have to make the HTML style visibly


not hidden

using


`htmloptions`

.

use display:block; style in htmloptions. you can also do this with jquery on document ready.

Moved from Indonesian to General Discussion for Yii 1.1.x

This does not work as this condition is added to input tag