Yii2 kartik dependent dropdown not changed the selected value with ajax after loading dropdown values with ajax

Question

Want to change selected value of dependent drop-down. After loading drop-down values with ajax in dependent drop down following code is not working

$("#dependentDropDownID").select2("val", data);

Above code working fine on first time load of dependent drop-down.

Answer 1

When we are using kartik select2 drop down then actual id of drop down gone in hidden state so to change value of hidden drop down we have to use "change" event on that id. Use following code for changing selected value of drop down.

$("#dependentDropDownID").val(data).change();

Answer 2

Kartik prepared plugin called DepDrop, which will do all for you.

echo $form->field($model, 'subcat')->widget(DepDrop::classname(), [
   'options'=>['id'=>'subcat-id'],
   'pluginOptions'=>[
       'depends'=>['cat-id'],       // id of first input
       'placeholder'=>'Select...',
       'url'=>Url::to(['/site/subcat'])   //url to fetch data
   ]
]);

Plugin: Kartik DepDrop