https://github.com/ivaynberg/select2の select2 ボックスが気に入っ ています。 format: オプションを使用して各要素をフォーマットしていますが、見栄えがします。

選択した要素が画像のために選択ボックスの高さよりも大きいことを除いて、すべて問題ありません。

幅を変更する方法は知っていますが、高さを変更して、要素が選択された後に全体が表示されるようにするにはどうすればよいですか (約 150px)

これが私の開始です：

ここに私の選択ボックスがあります

明確にするために：各オプションの高さを変更したくありません 。子を選択した後に高さを変更する選択ボックスを探しています。

したがって、ページが最初にロードされると、「子が選択されていません」と表示されます。ドロップダウンをクリックして子を選択すると、子の画像が表示されます。今、展開する選択ボックスが必要です! そうしないと、子供の絵が途切れてしまいます。

誰かわかりますか？

Select2ドロップダウンボックスに入力するjquery/ajaxの記述についてサポートが必要です。

Select2が何であるかを知らない人のために、これは、TwitterBootstrapの外観と検索/先行入力機能をhtml選択リストのドロップダウンボックスに提供するjavascript拡張機能です。詳細については、こちらの例をご覧ください：Select2Githubページ

だから私はついにこれをすべてまとめました、そして私の問題の解決策は私が結果とリスト選択をフォーマットするための機能を欠いていることでした。以下のコードは、先行入力が完全に機能するSelect2ドロップボックスを生成します。

コントローラーのJsonメソッド：

上記のJsonコントローラーメソッドは、シリアル化されたJsonオブジェクトのリストを返します。そのItemNameには、提供された文字列'query'が含まれます（この'query'は、Select2ドロップボックスの検索ボックスから取得されます）。

以下のコードは、 Select2ドロップボックスを強化するためのビュー（または必要に応じてレイアウト）のJavascriptです。

Javascript：

次に、ビューの本体に、 Select2がドロップボックスをレンダリングする非表示の入力要素が必要です。

HTML：

または、MVC Razor html.hidden要素をビューモデルにアタッチして、選択したアイテムIDをサーバーにポストバックできるようにします。

Html（MVC Razor）：

非表示フィールドを使用して選択ボックスを取得するために、ajax 呼び出しで select2 プラグインを使用しています。私のページには、別の選択ボックスをページに追加する追加ボタンがあります。この挿入されたフィールドで select2 プラグインを動作させようとしています。「on」メソッドも試しました..

しかし、そうすると、元々ロードされているフィールドでも機能しなくなります。「on」機能を削除すると、追加されたコンテンツでは機能しません。

これは、フォームに追加するために使用している基本的なコードです..

私はしばらくの間select2プラグインを操作してきましたが、今までは完璧でした。

データを読み込んで正常に機能している3つの選択と、ポップアップ内にある複数の選択を含むページがあります。見栄えは良いですが、検索フィールドに書き込むことはできません。メインページでは検索がうまく機能しているので、何が問題なのかわかりません。

私はポップアップ用のblockUIプラグインを使用しています。私はz-indexを試し、blockUI関数のコールバックでプラグインを破棄して開始しましたが、何も機能しておらず、理由がわかりません。

コード：

Select2は、リストからすべてのアイテムを正常にロードします。これは、ページのロード時に特定の値を選択しようとしたときに見つかった問題です。例：

:: select2を特定のhtml要素に配置すると、すべてのアイテムがロードされても値は選択されません。

::ページが読み込まれると、選択した特定のアイテムを表示しようとしていますが、選択してもselect2に表示されないため、期待どおりに機能しません。

ページが読み込まれたときにポップアップするように選択したオプションを作成するにはどうすればよいですか？

前もって感謝します。

更新しました

::すべてのselect2アイテムをロードする方法（申し訳ありませんが、その翡翠、純粋なHTMLではありません）：

PS：私のリストのすべてのアイテムが読み込まれます。

:: select2を初期化する方法：

私のJavaScriptに次の行コードを置くだけで成功します：

::特定の値を選択する方法：

• 最初の試み：

  /li>

• 2回目の試行：

  /li>

PS：#field-category値が非表示の入力フィールドにあり、正常に機能します。

みんなありがとう！

私はselect2プラグインをしばらく使用してきましたが、今まで完璧でした。

データをロードして正常に動作している 3 つの選択と、ポップアップ内にある複数の選択を含むページがあります。見栄えは良いのですが、検索フィールドに書き込むことができません。メインページでは検索がうまく機能しているので、何が問題なのかわかりません..

私はポップアップ用のblockUIプラグインを使用しています。z-index、destroy、および blockUI 関数のコールバックでプラグインを開始しようとしましたが、何も機能せず、理由がわかりません。

コード：

なにか提案を？

select2 を jQuery 1.9.1 および select2 3.3.0 で使用して、かなり基本的なユースケースだと思うものを実装しようとしています... select2 コントロールに、別の select2 コントロールの状態に基づいたオプションを設定したいと考えています。

私は次のものを持っています：

編集: この回答は、コントロールが消えていた理由を示しています。この実装に関して質問が残っています:

1. #masterに初期選択を持たないようにするにはどうすればよいですか?
2. マスターが選択されたという事実に応答するように、#detail のプレースホルダー テキストを変更するにはどうすればよいですか?

次の機能でフォーマットの問題が発生します。以下に示すように、ほとんどの場合機能しますが、検索ボックスのフォーマットだけが私が望むものではありません（先行入力のTwitterブートストラップ機能を複製したい）：

ユーザーは、検索ボックスに本のタイトルを入力し、検索ボックスの下のドロップダウンで（ajaxを介して）選択する本の選択を取得し、本を選択できます。ドロップダウンで本を選択すると、フォームに本の情報が入力されます。ちょうどそのように：

私の問題は、select2が検索入力の形式を自動的に変更することです（検索ボックスで選択した項目の周りにcssを追加します）。ここを参照してください：

質問

Select2の用途が正確ではないことはわかっていますが、検索ボックスの値を「rails」にして、入力したときとまったく同じように表示したいと思います（最初のスクリーンショット）。通常の入力形式を維持するにはどうすればよいですか？

詳細：

これが私がこれまでに持っているコーヒースクリプトコードです（それは写真の非同期ロードと選択のフォーマットを特徴とします）：

http://jsfiddle.net/tXFbk/2/

HTML：

JS：

最初のロード時に値を複製し、値をクリアした後は入力からクリアしません。また、アイテム（「もう少しテキスト」など）を追加してから削除しても、入力値からはクリアされません。値の重複を停止させる方法はありますか？もう1つ-すでに追加されたアイテムの追加を無効にする方法は？