2012-07-25 13 views
9

ASP.NET MVCアプリケーションでjQuery Chosenプラグインを使用しています。ドロップダウンリストに項目がある場合、data-placeholder属性は機能していません。デフォルトテキストを表示する代わりに、自動的にリストの最初の項目が選択されます。jQuery Chosenは、入力時にデータプレースホルダを表示しません。

これは私のドロップダウンリストを定義する方法です。

@Html.DropDownListFor(m => m.Keep, Model.Data, 
    new { @class = "chzn-select", data_placeholder = "Default..." }) 

Model.Dataは(それがEFを使用して、ビューモデルで満たされている)空の場合、デフォルトのテキストが表示されます。それ以外の場合は、最初の項目が選択されます。私はいつも私のドロップダウンリストにデフォルト値を表示したい。

私はプラグインを$('.chzn-select').chosen();経由で適用します。特別なことはありません。

アイデア?前もって感謝します。

答えて

19

最初に空のオプションを追加する必要があります。マニュアル通りに

からhttp://harvesthq.github.com/chosen/

注:単一の選択で、最初の要素は、ブラウザによって選択されているものとします。デフォルトのテキストサポートを利用するには、選択リストの最初の要素として空白のオプションを含める必要があります。

は、多分それは

$(".chzn-select").prepend("<option></option>"); 
+0

ありがとうございました。出来た。 –

+1

ASP.Netを使用している場合は、@ SametGunaydinのようなRazorですべての作業を行う必要があります.jQueryで余分なステップを踏まないでください –

0

あなたのデフォルト値は、リスト内の自分の価値観に置き換えられBecoz追加するためのjQueryを使用しています。したがって、デフォルト値を表示するには、そのデフォルト値をリストの最初の項目として追加します。コードはあなた

$(".chzn_a").prepend("<option></option>"); 
0

既定のテキストサポート

選択要素のデータプレースホルダ値を読み取ることによって、デフォルトのフィールドテキスト( "国を選択...")が自動的に設定されます。データプレースホルダ値が存在しない場合は、選択が単一か複数かに応じて、デフォルトで「オプションの選択」または「一部のオプションの選択」になります。これらの要素は、適切に表示されるように、プラグインjsファイルで変更できます。

注:単一選択では、最初の要素はブラウザによって選択されたものとみなされます。デフォルトのテキストサポートを利用するには、選択リストの最初の要素として空白のオプションを含める必要があります。 Default Text Support

+0

これは答えよりもコメントとして適切な場合があります。 –

5
@Html.DropDownListFor(model => model.categoryModel.Id, ViewBag.CategoryList as SelectList, "", new { @class = "chzn_a", data_placeholder = "Choose Category.." }) 

追加「」、に結合するレコードがあるかどうかをチェック

0

に動作しなかった場合は、以下のリストの最初の要素とあなたのSelectListの後にモデル

0

ブランクを追加してもコードが動作しない場合は、optionとなります。コードをロードして有効にするには、ブラウザが新しいページを必要とすることがあることを知っておく必要があります。

だからあなたのタブを閉じて新しいタブを開き、プロジェクトページに移動して変更を確認してください!

1

私は同じ問題を抱えていたし、私は次のようでした:

あなたが選択したフィールドを初期化するときに幅サイズで%を使用しないことがあります。

$(".chosen").chosen({ 
'no_results_text' :'Oops, nothing found!', 
'width'   :'700px', 
'search_contains' : true, 
'placeholder_text_multiple':'Please choose something ...', 
'display_selected_options':false    

});

関連する問題