Question

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

首次下拉

.Then()

第二次下拉

 <?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; }'),
    ],
]);
         ?>

使用上面的代码我可以在第二个下拉列表中更改选择。但在改变之后，我无法在第二次下拉中做出选择。

请帮忙......

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();

Yii2 select2 ajax下拉加载

3 个答案: