カスタムメニューを作成して、標準の選択メニューの機能を複製しようとしています。
問題は、選択メニューのように動作させることができないことです。私の目標は、リスト項目がクリックされるたびに「選択された」テキストを置き換えることができるようにすることです。また、ユーザーがメニューの外側をクリックするたびにメニューを閉じようとしています。
これが私のJSフィドルへのリンクです:
洞察に感謝します!! ありがとう!
-D
カスタムメニューを作成して、標準の選択メニューの機能を複製しようとしています。
問題は、選択メニューのように動作させることができないことです。私の目標は、リスト項目がクリックされるたびに「選択された」テキストを置き換えることができるようにすることです。また、ユーザーがメニューの外側をクリックするたびにメニューを閉じようとしています。
これが私のJSフィドルへのリンクです:
洞察に感謝します!! ありがとう!
-D
コードを修正する限り、次のように変更する必要があり$('.selected').appendTo('.custom-select span');
ます$('.custom-select span').html($('.custom-select ul li.selected').html());
選択リストに関する問題は、ブラウザー/OS によってスタイル設定され、いくつかの onclick/onblur アクションと、他のキーにタブ移動して押すときの複雑なアクションがあることです。
そうは言っても、jquery selectbox プラグインを調べることをお勧めします。https://github.com/fnagel/jquery-uiを強くお勧めします。選択ボックスとまったく同じように動作しながら、ブラウザー間で最も一貫性があることがわかったからです。
それらのコードは複雑ですが (表示されているものの背後に非表示の選択ボックスがあるなど)、すべて必要です。私の個人的な経験から、このプラグインは非常に簡単にスタイル設定およびカスタマイズできます。