2017-04-19 16 views
0

yii2の基本的なActiveFormではドロップダウンリストを追加しました。それに "options"配列を使用して属性を追加しました.iドロップダウンリストにselect2を追加したいのですが働いていない.Iは、ウェブ上で検索し、私は以下で使用しているが、まだそのはすべてのヘルプははるかに高く評価されるだろうYii2のドロップダウンリストでselect2を適用する方法

<div class="col-xs-6 col-lg-6"> 
    <div class="form-group form-material floating" data-plugin="formMaterial"> 
     <div class="example"> <b role="presentation"></b> 
     <?= $form->field($model, 'corporation_status')->dropDownList(Yii::$app->appstatues->status,['options'=>['class'=>'form-control','prompt'=>'abc','data-plugin'=>'select2']])->label('Stat'); ?> 
     </div> 
     </div> 
     </div> 

ビューに何も出力を示していない「オプション」配列のこの方法を発見しました。

+1

使用[kartikのSELECT2ウィジェット](http://demos.krajee.com/widget-details/select2) – gmc

答えて

0

使用延長https://github.com/kartik-v/yii2-widget-select2

多くの良い機能拡張もあります:「セレクト2」のためのソリューションは、あなたのドロップダウンリストに追加されることがわかっ http://demos.krajee.com/

+0

は、我々はどこでも "データ・プラグイン" => 'SELECT2' を使用することによってそれを行うことはできませんオプション配列内?それは正しい方法ではありませんか? –

+0

これを行う正しい方法は、JSライブラリSelect2(Kartikのものが最も使用されています)にYii2ラッパーを使用することです。 'data-plugin'は、あなたが知ることができないさらなるロジックがないかぎり動作しません。その属性を持つ要素でSelect2を開始することもできますが、ラッパーはそれを使用しないとうまくいかず、多くの人や有名なラッパーによって使用されています。 – Ravenous

0

は、次の手順を実行します。 次のCSSを追加して、あなたの "AppAsset" にJSファイル:

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css 
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js 

と、このようなフォームフィールドの追加 'データ・プラグイン' => 'SELECT2' 内:

<?= $form->field($model, 'corporation_status')->dropDownList(Yii::$app->appstatues->status,['prompt' => 'hello','data-plugin'=>'select2','class'=>'form-control'])->label('Status'); ?> 
0

実行ウィジェットを使用するように次にyii2

php composer.phar require kartik-v/yii2-widget-select2 "@dev" 

ためkartikの\ SELECT2ウィジェットをインストールするには、このコマンドを実行します。

//Include kartik\select2 Class 
use kartik\select2\Select2; 

// Normal select with ActiveForm & model 
echo $form->field($model, 'corporation_status')->widget(Select2::classname(), [ 
    'data' => Yii::$app->appstatues->status, 
    'options' => ['prompt' => 'Select a state ...'], 
    'pluginOptions' => [ 
     'allowClear' => true 
    ], 
]); 
関連する問題