Question

我正在尝试在Yii2中创建一个dependend dropDownList。我正在尝试使用DepDrop Widget，但我无法理解如何根据我的情况编辑代码。我有1个模型，其中我需要创建类别下拉列表，根据category_id，下一个dropDownList应该是Item。（F.e如果我选择类别1，则项目应为Item1，依此类推。）

我猜这个扩展只能做同一型号的下拉菜单吗？我是Yii2的新手，所以。

我的view文件：

<div class="site-create">

<?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'code') ?>
    <?= $form->field($category, 'id')->dropDownList($category, ['id'=>'category-id']); ?>
    <?= $form->field($item, 'subcat')->widget(DepDrop::Item(), [
         'options'=>['id'=>'item-id'],
        'pluginOptions'=>[
         'depends'=>['category-id'],
        'placeholder'=>'Select...',
        'url'=>Url::to(['/site/subcat'])
        ]
   ]); ?>

我的$model与$category和$item的型号不同。我将这些变量设置为在动作中使用不同的模型

这是我的action：

    public function actionSubcat() {
    $category = new Category();
    $item = new Item();
    $out = [];
    if (isset($_POST['depdrop_parents'])) {
        $parents = $_POST['depdrop_parents'];
        if ($parents != null) {
            $cat_id = $parents[0];
            $out = self::getSubCatList($cat_id); 
            echo Json::encode(['output'=>$out, 'selected'=>'']);

        return $this->render('create', [
                'category' => $category,
                'item' => $item,
            ]);
        }
    }
    echo Json::encode(['output'=>'', 'selected'=>'']);
}
}

现在我收到$category变量未定义的错误消息。有人可以解释一下我做错了吗？

Answer 1

我建议使用knockoutjs来做这件事。 i answered a similar question here 淘汰赛example is here（类别＆gt;产品）

HTML：

<select data-bind="options: data, value: selected, optionsText: 'title', optionsCaption: '---'"></select>
<select data-bind="options: dependent"></select>

的javascript：

<script>
    function viewmodel() {
        var self = this;

        this.data = [
            { title: 'title a', items: ['a1', 'a2', 'a3'] },
            { title: 'title b', items: ['b1', 'b2', 'b3'] },
            { title: 'title c', items: ['c1', 'c2', 'c3'] }
        ];

        this.selected  = ko.observable();
        this.dependent = ko.computed(function() {
            return ((self.selected() || {}).items || []);
        });

    }

    $(document).ready(function() {
        ko.applyBindings(new viewmodel());
    });
</script>

您仍然可以使用$form->field，只需将'data-bind'属性添加为inputOption即可。如果你想使用字段的默认值，Json::encode这些键值对，并创建如下的viewmodel：

ko.applyBindings(new viewmodel(<?= Json::encode($data) ?>));

使用这些参数是javascript手工劳动

Answer 2

实际上你不需要任何小部件或插件。在yii2中，您可以轻松地在此处执行Dependent Dropdown列表示例：

echo $form->field($search,'category')->dropDownList(
    ArrayHelper::map(
        \app\models\Category::find()->all(),
        'id','name'
    ),
    [
        'prompt' => Yii::t('app','choose_city'),
        'onchange'=>'
        $.get( "'.Yii::$app->urlManager->createUrl('site/dropdown?id=').'"+$(this).val(), function( data ) {
        $( "select#subcat" ).html( data );
        })'
    ]
);
echo $form->field($search, 'sub_category', ['inputOptions'=>['id'=>'subcat',]])->dropDownList([]);

之后，您需要为返回操作创建操作。例如：

 public function actionDropdown($id)
{
    $countPosts = \app\models\SubCategory::find()
        ->where(['category_id' => $id])
        ->count();

    $posts =  \app\models\SubCategory::find()
        ->where(['category_id' => $id])
        ->orderBy('name ASC')
        ->all();
    echo "<option value=''>-</option>";
    if($countPosts>0){
        foreach($posts as $post){
            echo "<option value='".$post->id."'>".Yii::t('app',$post->name)."</option>";
        }
    }

}

这就是全部。

如何在Yii2中制作依赖下拉列表？

2 个答案: