Yii2: Membuat Dependen Dropdown Tanpa Extension Tambahan

dependent-dropdownBerawal dari pertanyaan seorang rekan di FB Grup Yii Indonesia, tepatnya Saudara Kakak Pertama  (emang kera sakti??) yaitu tentang dependen dropdown.. dimana dia memberikan link http://www.yiiframework.com/wiki/24/creating-a-dependent-dropdown/ yang merupakan problem solving kasus tersebut namun untuk Yii versi 1.. nah pertanyaanya gimana implementasinya di Yii versi 2??

Dependent Dropdown sebenarnya adalah kasus klasik yang pertanyaanya selalu diulang-ulang di forum2.. maybe para master bosen dengan pertanyaan ini.. hehehe

Nah harusnya ketika di Yii1 bisa maka Yii2 pun dengan cara yang hampir sama juga bisa.. hanya saja setelah searching saya mendapati jawaban dari Qiang (Yii Dev)

qiangxue commented on Aug 28, 2013
In 2.0 we removed most in-page js code. You should write explicit js code in external js files to achieve similar result as in 1.1. The code is very trivial though.

Terus terang jawaban ini membuat saya bertanya-tanya, kenapa demikian?? so jadi gak mungkin dong dengan pendekatan yang sama di Yii1 kita bisa melakukannya untuk Yii2, dan setelah searching lagi nemu solusi mudahnya yaitu menggunakan widget external buatan krajee yaitu http://demos.krajee.com/widget-details/depdrop, tapi bagaimana sebenarnya logikanya? perlukah kita faham? atau adakah waktu bagi kita untuk memahaminya? hehe

Oke jika Anda punya waktu, saya akan mencoba menjabarkan dengan cara yang sederhana. Jangan takut karena ternyata begitu mudahnya membuat Dependent Dropdown tanpa extension luar.. yap from scracth..

# Kode Untuk Menampilkan Dropdown
Pertama kita harus tau dulu kode untuk menampilkan dropdown

echo $form->field($model, 'name_field')->dropDownList(
[items],
[options]
);

items adalah data dropdown
options adalah html options

Artinya kalo mau bikin dependent dropdown kita butuh minimal 2 buah dropdown :)

# Tambahkan Event Pada Dropdown
Dropdown sebenarnya menggunakan kode HTML select, sehingga kita bisa gunakan event onchange padanya

echo $form->field($model, 'name_field')->dropDownList(
 [items],
 [options]
 );

Pada contoh diatas terlihat bahwa ketika event onchange ditambahkan akan menjalankan fungsi javascript alert. Nah ternyata kita bisa pake JQuery disini..

echo $form->field($model, 'name_field')->dropDownList(
[items],
['onchange'=>'alert($(this).val())']
);

Oke sampe sini sebenarnya masaalah kita udah solve.. syaratnya Anda mudeng JQuery :)

# Dropdown to inputText
Kita coba case lali yang lebih sederhana

<?php
echo $form->field($model, 'status')
->dropDownList(
['0'=>'Draft','1'=>'Publish'],
['prompt'=>'','onchange'=>'$("input#target").val($(this).val())']
);

$form->field($model, 'title')->textInput(['id' => 'target']);
?>

Kode diatas, ketika dropdown change maka akan melempar nilainya ke target dalam hal ini textInput.

# Dependent Dropdown
Contoh sebelumnya, adalah melempar value ke sebuah textInput, nah kalo untuk dropdown yang kita lempar bukan value text melainkan value html

awalnya
<select></select>
menjadi</p>
<select>
<option>val1</option>
<option>val2</option>
<option>val3</option>
</select>

Nah option atau saya menyebutnya items dari dropdown tersebut bisa kita populate via controller so mau manual atau ngambil data via database.. suka suka kamu..

Ni contoh kode Controller

public function actionLists($id)
 {
 $countPosts = \common\models\Post::find()
 ->where(['category_id' => $id])
 ->count();

 $posts = \common\models\Post::find()
 ->where(['category_id' => $id])
 ->orderBy('id DESC')
 ->all();

 if($countPosts>0){
 foreach($posts as $post){
 echo "<option value='".$post->id."'>".$post->title."</option>";
 }
 }
 else{
 echo "<option>-</option>";
 }

 }
 

No contoh viewnya

use yii\helpers\ArrayHelper;
$dataCategory=ArrayHelper::map(\common\models\Category::find()->asArray()->all(), 'id', 'name');
echo $form->field($model, 'category_id')->dropDownList($dataCategory,
['prompt'=>'-Choose a Category-',
'onchange'=>'
$.post( "'.Yii::$app->urlManager->createUrl('post/lists?id=').'"+$(this).val(), function( data ) {
$( "select#title" ).html( data );
});
']);

$dataPost=ArrayHelper::map(\common\models\Post::find()->asArray()->all(), 'id', 'title');
echo $form->field($model, 'title')
->dropDownList(
$dataPost,
['id'=>'title']
);
?>

Kasus diatas adalah Category vs Post (artikel) jadi ketika Category dipilih maka dropdown ke dua akan menampilkan artikel dengan category tersebut..

Happy coding

Tabel Category (id, name)

Tabel Post (id, title, content, category_id)

Tags:
24 Comments
  1. Joe
  2. Gedhe76
    • Hafid Mukhlasin
    • Hani Mauliza
  3. abi
  4. bima
  5. Hafid Mukhlasin
  6. bima
  7. nisa
    • Hafid Mukhlasin
  8. fadila
    • Hafid Mukhlasin
  9. rosyid
    • rosyid
      • Hafid Mukhlasin
  10. rosyid
  11. bamby
  12. miqdad
  13. Chalik
  14. Lukman Thalib
  15. Putra Pratama
  16. Abinya Salwa

Leave a Reply

Your email address will not be published. Required fields are marked *