Membuat Dependent Dropdown di Yii

Kadangkala kita ingin membuat dropdown (combo box) yang isinya bergantung pada combo box yang lain. Sebagai contoh kita memiliki dua dropdown, yaitu Propinsi dan Kabupaten/Kota. Pada dropdown pertama kita memilih salah satu propinsi di Indonesia. Pada dropdown kedua harus secara otomatis menampilkan kabupaten atau kota di dalam propinsi yang kita pilih pada dropdown pertama tadi. Postingan ini bagian dari kumpulan tutorial Yii Bahasa Indonesia.

Membuat Dependent Dropdown di Yii

Fungsi seperti itu disebut dengan dependent dropdown, karena dropdown yang kedua valuenya bergantung pada dropdown yang pertama. Untuk membuatnya, simak potongan source code berikut ini. Pertama di bagian view kita menampilkan value seluruh propinsi di dropdown yang pertama dengan menggunakan Chtml:listData. Ketika dropdown pertama (propinsi) tersebut dipilih, dia akan mengirim data menggunakan method POST ke controller untuk meminta daftar kabupaten pada propinsi yang terpilih. Setelah itu di bagian view yaitu pada dropdown yang kedua (kabupaten/kota) akan menampilkan data kabupaten/kota dari propinsi yang tadi dipilih. Source code bagian view:

<td style="width:240px;"><?php
	$list = CHtml::listData(MasterPropinsi::model()->findAll(array('order' => 'id_prop')), 'id_prop', 'nama_propinsi');
	echo $form->dropDownList($model, 'id_prop', $list, 
	array(
		'empty' => '- Pilih Propinsi -',
		'ajax' => array(
			'type' => 'POST',
			'url' => CController::createUrl('dynamickabkota'),
			'update' => '#' . CHtml::activeId($model, 'id_kab_kota'),
			),
		'style'=>'margin-top:10px;float:right;margin-left:8px;margin-right:8px;'
	));
	?>
</td>

Source untuk bagian Controller:

public function actionDynamicKabKota() {
    $data = MasterKabKota::model()->findAll('id_prop=:id_prop', array(':id_prop' => $_POST['ModeldiForm']['id_prop']));
    $data = CHtml::listData($data, 'id_kab_kota', 'nama_kab_kota');
    foreach ($data as $value => $name) {
        echo CHtml::tag('option', array('value' => $value), CHtml::encode($name), true);
    }
}

Source code untuk bagian view pada dropdown kabupaten/kota:

<tr>
	<td style="width:40px;text-align:center;">2.</td>
	<td><?php echo $form->labelEx($model,'id_kab_kota'); ?><?php echo $form->error($model,'id_kab_kota', array('style'=>'margin-top:10px;float:right;margin-left:8px;margin-right:8px;')); ?></td>
	<td>
		<?php
		echo $form->dropDownList($model, 'id_kab_kota', array(), array('empty' => '- Pilih Kabupaten/Kota -', 'style'=>'margin-top:10px;float:right;margin-left:8px;margin-right:8px;'));
		?>
	</td>	
</tr>

Untuk database,, ada dua tabel yaitu master_propinsi (id_prop, nama_prop), dan master_kab_kota (id_kab_kota, id_prop, nama_kab_kota). Bagian model default aja digenerate dari generator Gii. Sekian tutorial (atau catatan) tentang membuat dependent dropdown di Yii. Semoga bermanfaat.