Create cascading menus with YII framework dropdown

Create cascading menus with YII framework dropdown


You often need a form, cascading city, or cascading classification and so on, with two drop-down boxes, one of which depends on another drop-down box. Using the built-in Ajax features of Yii, you can create such a drop-down box. The following shows how to implement it.

The first is the view of the form. We will show a form that shows the country, as well as the city according to which the country will show it.
Program Code Program code
<?php
echo CHtml::d ropdownlist (' country_id ', ', ', Array (1=> ' USA ',2=> ' France ',3=> ' Japan '),
Array
' Ajax ' = = Array (
' Type ' = ' POST ',//request type
' url ' = ' dynamiccities ',//url to call
' Update ' = ' #city_id ',//selector to update
' Data ' = ' js:javascript statement '
Leave out the data key to pass all form values through
)));

Empty since it'll be filled by the other dropdown
echo CHtml::d ropdownlist (' city_id ', ', ', Array ());
?>


The first drop-down box consists of several value/name pairs representing the state. When it is changed, an AJAX request will be completed by the ' dynamiccities ' action of the current controller. The result of the request (the output of the ' dynamiccities ' action) will be replaced by a drop-down box with the second ID of #city_id.

Next is the controller action, which outputs the HTML to populate the second drop-down box. It will also depend on the value of the first drop-down box.
Program Code Program code
<?php
Public Function actiondynamiccities ()
{
$data =location::model ()->findall (' parent_id=:p arent_id ',
Array (':p arent_id ' = = (int) $_post[' country_id '));

$data =chtml::listdata ($data, ' id ', ' name ');
foreach ($data as $value = $name)
{
echo chtml::tag (' option ',
Array (' value ' = = $value), Chtml::encode ($name), true);
}
}
?>


It will retrieve all parent_id that are the first drop-down box value in the city. All of these cities are then exported to the label, resulting in a second drop-down box.

You may want to know where $_post[' country_id ' comes from. Very simply, when the ' data ' key of the Ajax array in the first drop-down box is empty, the values of all elements in the form of the drop-down box are passed to the controller, via AJAX requests. If you are using Firebug you can view this request.

This behaviour can also be changed. By default, the value of the ' data ' key in the AJAX configuration array is js:jquery (this). Parents ("form"). Serialize (). JS at the beginning: Tell Yii that it is followed by a JavaScript statement and should not be escaped. Therefore, if you change the ' data ' key to another ' JS: ' Start statement, you can fill in your own statement. Also applies to the ' success ' parameter.

