Yii2 select2 ajax 下拉加载

Question

我正在使用两个使用 Yii2 kartik 小部件的 select2 ajax 加载下拉列表。我需要在更改第一个下拉列表的选择时更改第二个下拉列表的选择。

第一个下拉菜单

 <?php

     $qtnno = '';
     $qtn = ServiceQuotation::find()->where(['UDNO' => $model->QTN_UDNO])->one();
     if($qtn != null)  $qtnno = $qtn->UDNO;

    echo $form->field($model, 'QTN_UDNO')->widget(Select2::classname(), [
    'initValueText' => $qtnno, // set the initial display text
    'options' => ['placeholder' => 'Search for a Quotation ...',
             'onchange'=>'
		                $.getJSON( "'.Url::toRoute('getqtndetails').'", { id: $("#servicejobcard-qtn_udno").val() } )
		                    .done(function( data ) {
		                        $( "#'.Html::getInputId($model, 'QTNNO').'" ).val( data.qtnno );
		                        $( "#'.Html::getInputId($model, 'QTNDATE').'" ).val( data.qtndate );
		                        $( "#'.Html::getInputId($model, 'PCODE').'" ).select2({ data: [{id: data.pcode, text: data.pname}]});;
                                $( "#'.Html::getInputId($model, 'PCODE').'" ).select2("val",data.pcode);
                                $( "#'.Html::getInputId($model, 'PROJECTNAME').'" ).val( data.projectname );
		                    }
		                );'
                 ],
      'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength' => 3,
        'ajax' => [
            'url' => $urlQtn,
            'dataType' => 'json',
            'data' => new JsExpression('function(params) { return {q:params.term}; }')
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('function(data) { return data.text; }'),
        'templateSelection' => new JsExpression('function (data) { return data.text; }'),
    ],
]);
         ?>

第二个下拉菜单

  <?php

     $cusName = empty($model->PCODE) ? '' : Customer::findOne($model->PCODE)->PNAME;

    echo $form->field($model, 'PCODE')->widget(Select2::classname(), [
    'initValueText' => $cusName, // set the initial display text
    'options' => ['placeholder' => 'Search for a Customer ...',
                 ],
      'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength' => 3,
        'ajax' => [
            'url' => $url,
            'dataType' => 'json',
            'data' => new JsExpression('function(params) { return {q:params.term}; }')
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('function(party) { return party.text; }'),
        'templateSelection' => new JsExpression('function (party) { return party.text; }'),
    ],
]);
         ?>

使用上面的代码，我可以在第二个下拉菜单中更改选择。但更改后，我无法在第二个下拉列表中进行选择。

请帮忙...

Answer 1

尝试以这种方式使用onchange事件：

[
    'options' => [],
    // other settings
    'pluginEvents' => [
        'change' => "function() { alert('change'); }",
    ]
]

您可以在该页面上找到更多信息http://demos.krajee.com/widget-details/select2

Answer 2

如果您不仅限于使用 Select2 小部件，我建议您使用专门为依赖下拉菜单创建的 Kartik V 的 DepDrop 小部件。

由于您没有为您的代码实际执行的操作提供大量上下文，因此我给出了一个简单的 2 级依赖示例（Kartik V 的 depdrop 小部件页面中给出的示例的略微修改版本）。

/*
 * 2-level dependency example
 */
// THE VIEW
use kartik\widgets\DepDrop;

// Parent 
echo $form->field($model, 'cat')->dropDownList($catList, ['id'=>'cat-id']);

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

// THE SITE CONTROLLER (/site/subcat)
public function actionSubcat() {
    $out = [];
    if (isset($_POST['depdrop_parents'])) {
        $parents = $_POST['depdrop_parents'];
        if ($parents != null) {
            $cat_id = $parents[0];
            $out = self::getSubCatList($cat_id); 
            // the getSubCatList function will query the database based on the
            // cat_id and return an array like below:
            // [
            //    ['id'=>'<sub-cat-id-1>', 'name'=>'<sub-cat-name1>'],
            //    ['id'=>'<sub-cat_id_2>', 'name'=>'<sub-cat-name2>']
            // ]
            echo Json::encode(['output'=>$out, 'selected'=>'']);
            return;
        }
    }
    echo Json::encode(['output'=>'', 'selected'=>'']);
}

以上代码可根据您的要求定制。

这里是更多详细信息的链接：http://demos.krajee.com/widget-details/depdrop

Answer 3

您可以添加这种查询来完成这项工作。

$cusname=QtnUdno::find()->select('PCODE')->where(['UDNO'=>$model->QTN_UDNO])->one();