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`
.