8

select複数のHTMLドロップダウンを含むページがonclickあり、要素の入力が必要です。selectこの入力は、要素のクリックイベントリスナーでAJAX呼び出しを使用して行われます。

この理由は、パフォーマンスとロードが非常に重要であるため、ページのロード時にそれらを設定できないためです。

また、デザインではネイティブHTML要素を使用する必要があります。select

この問題を示すためにjsFiddleデモを作成しました。クリックするselectとアイテムが表示selectされ、結果として幅が広がります。

ここに画像の説明を入力してください

ただし、select（AJAXポピュレーションの前の）初期オプションのみが表示されます。

------デモを見る------

デモではsetTimeout()、50ミリ秒を使用してAJAX応答時間をエミュレートします。

onclickこれを設定して正しく表示するにはどうすればよいですか？

select人口応答のonコールバックを開く方法はありますか？

編集：あるいは、スタイリングにブラウザのネイティブテーマを使用するjQueryプラグインドロップダウンはありますか？

私がこれまでに試したこと

  • オンホバーにselectデータを入力しますが、クイックユーザーselectはオプションが読み込まれる前にを開くことができます。また、ユーザーがページ全体をスクロールして、すべてをスクロールするselectと、多くの不要なAJAX呼び出しが発生します。
  • イベントリスナーを（@AndyPerlitchが提案したように）focusの代わりに変更します。ただし、AJAXリクエストの応答に50ミリ秒しかかからなかった場合、これは機能しません。（デモを参照）click
  • イベントリスナーをに変更するmousedownと、と同じ効果がありますfocus

更新：これはFireFoxの問題ではありません。select開いてから、新しいアイテムをロードして表示します。すべて開いた状態です。

4

4 に答える 4

3

リッスンするイベントをからに変更しclickますfocus

于 2012-10-15T15:18:41.950 に答える
2

個人的には完全に別のアプローチを選びますが、それはあなたのニーズに依存します。ここでは、ドロップダウンがユーザーによって「ほぼ確実に」クリックされる（したがってロードされる）と想定しています。

selectそのことを念頭に置いて、ページが読み込まれるとすぐにajaxを使用してリストにデータを入力したくなるでしょう。これには、ページをすばやくロードできるという利点があります（「ページのロード」リストの収集がまだないため）が、ユーザーが選択リストを使用する必要があると判断する前に、ajaxが完了する可能性が高いことも意味します。ajaxの日が遅く、ユーザーがスーパーマンのように速い場合に備えて、追加の手順を実行して、ajaxが動作している間、選択したアイコンの代わりに一時的な読み込みアイコンを配置することもできます。

もちろん、これはすべて、ユーザーがドロップダウン要素を操作したときにajaxロードを実行するための要件に依存します。

または多分これはいくつかの用途を証明するかもしれませんか？

于 2012-10-16T15:51:05.297 に答える
1

選択は、クリックイベントが開始される前の状態で常に表示されます。したがって、クリックイベントの開始後にAJAXポピュレーションを実行するため、最初のオプションのみが表示されます。

これは妥協案かもしれませんが、クリックイベントの前にAJAXを入力してみてください。これは次のようになります。-すでに行ったように、ホバー時に（ユーザーはとにかくクリックするためにスクロールする必要があります）-選択に隣接する要素でのユーザーの追加クリック

于 2012-10-15T15:58:05.967 に答える
0

ドロップダウンリストを非表示にし、ユーザーがドロップダウンの読み込みと表示をトリガーするためにクリックできるように、その場所に何か他のものを配置します。

于 2016-05-24T16:21:19.490 に答える