Yii 使用 ajax 下拉

Question

所以我想要做的是使用我的数据库值在下拉列表中使用 ajax 填充 Yii 框架中的下拉列表。我在这里使用 Kartik 小部件是我的下拉代码，

<?php $primaryfield = [1 => 'Business Development(Sales)', 2 => 'Graphic Design', 3 => 'Social Media Marketing', 4 => 'Web Development']; ?>

<?= $form->field($model, 'primaryfield')->widget(Select2::classname(), ['data' => $primaryfield, 
 'options' => ['placeholder' => 'Enter Your Primary Field', 'multiple' => false], 'pluginOptions' => ['tags' => false, 'tokenSeprators' => [',', ' '], 'maximumInputLength' => 20],])->label(false); ?>

我对 PHP 中的 Ajax 了如指掌，但不知道如何使用 Kartik 小部件在 Yii 框架中使用它使用ajax的基础

Answer 1

如果我让您清楚，您希望有一个下拉列表，其中的项目由您的数据库动态生成。 这是您可以使用 kartik 下拉小部件实现的方式。

我将首先创建包含预定义类别的活动表单字段，如下所示

<?php $form = ActiveForm::begin(); 
   //Initialize predefined categories
   $data = [
      '1' => 'Business Development(Sales)',
      '2' => 'Graphic Design',
      '3' => 'Social Media Marketing',
      '4' => 'Web Development',
   ]; 
?>

这些字段将提示数据库通过 AJAX 检索特定类别的项目

<?= $form->field($model, 'primaryfield')->widget(Select2::classname(), [
        'data' => $data,
        'options' => ['placeholder' => 'Enter your primary field'],
        'pluginOptions' => [
            //'allowClear' => true
        ],
        'pluginEvents' => [
            "change" => "function() { 
                var id = $(this).val(); //extract the id of selected category   

                $.ajax({
                    method : 'GET',
                    dataType : 'text',
                    url : '../yourcontroller/populate?id=' + id,
                    success : function (response) {
                        var response = JSON.parse(response);
                        var myDropDownList = document.getElementById(\"model-item\");
                        $.each(response, function(index, value) {
                            var option = document.createElement(\"option\");
                                option.text = value;
                                option.value = index;

                               try {
                                    myDropDownList.options.add(option);
                                }
                                catch (e) {
                                    alert(e);
                                }
                        });
                    }
                });
            }",
        ],
    ]); 
?>
<?= $form->field($model,'item')->dropdownList(
        ['prompt'=>'Select Item']
    );
?>

现在在您的控制器中创建操作，该操作将根据所选类别从您的数据库中查询项目，并通过 ajax 将其返回到项目字段。

<?php 
 public function actionPopulate($id)
 {
   // the id above is the one selected from the category field so you can use
   // that Id now to retrieve items from your item-field with ajax
   /* in you case */
   $results = Category::find()
                 ->select('items')
                 ->where(['id' => $id])
                 ->asArray()
                 ->all();

    //these hard-coded values are for the demonstration 
    $results = [
        '1'=>'maziwa', 
        '2'=>'ugali', 
        '3'=>'samaki', 
        '4'=>'kuku', 
        '5'=>'mtetea',
    ];
    return json_encode($results);
}
?>

希望这会有所帮助！