Yii用ajax下拉

时间:2018-07-07 09:16:01

标签: php ajax yii yii2

所以我要做的是使用下拉列表中的数据库值用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

1 个答案:

答案 0 :(得分:0)

如果您说清楚了,您想要一个下拉列表,其中的项由数据库动态生成。 这是使用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);
}
?>

希望这会有所帮助!