2017-10-25 5 views
0

現在、私のASP.NET MVCプロジェクトでselect2.jsをテスト中です。 "通常"ビューの最初のテストはうまくいきましたが、これをajaxごとにロードされ、通常のビューページのdiv内に表示される部分ビュー内の選択ボックスに追加しようとしています。Select2はオプションを表示していません

ドロップダウンを生成するためのコードは次のようになります。

@Html.DropDownList("addRole", new SelectList(ViewBag.availableRoles, "Id", "Name"), "Rolle auswählen", new { @name="addRole", @class = "form-control" }) 

と部分ビューファイルの末尾に

が、私は以下のコメントを追加しました:

$(document).ready(function() { 
    //var data = [{ id: 1, text: "Test" }]; 

    $("#addRole").select2({ 
     //data: data 
    }); 
}); 

それがための作品のように見えます選択ボックスの外観は変わりますが、開こうとすると何も表示されません。上記の "データセット" jsコードのコメントを外すと同じことが起こります。それは私には何も見せてくれないし、理由もわからない。

私は既に$(document).ajaxCompleteまたはajax呼び出しの成功関数にjavascriptコードを追加しようとしましたが、何も変更していません。

+2

をだからこれは単に追加解決する

'ViewBag.availableRoles'に' Id'と 'Name'フィールドの有効な値が含まれているかどうかチェックしましたか? – SaschaM78

+1

それは 'select2'とは関係なく、それもそれがなくても働いていないので... –

+0

はい、DOM要素を調べると、すべてのエントリが表示されます。 '$("#addRole ")。select2()'を削除してもうまく動作します。 –

答えて

1

私は今答えを得ました。 問題はselect2要素に項目がないことではなく、問題は指定された項目が表示されなかったことです。だから私はなぜ彼らが現れなかったのかと思って、私は本当にばかだと分かった。 これは表示されましたが、Zインデックスのために表示されません。私のポップアップウィンドウには20kのz-indexがあるので、ドロップダウンリストはウィンドウの後ろにありました。

.select2-dropdown { 
    z-index:99999; 
} 

またはこのような特定のzインデックスを持つSELECT2設定にdropdownCssClassを追加します:

.select2-dropdown.increasezindex { 
    z-index:99999; 
} 

JS:

$(document).ready(function() { 
    $("#addRole").select2({ 
     dropdownCssClass:'increasezindex' 
    }); 
}); 
関連する問題