[解決済み] Html SelectのOptionsを、現在選択されている項目を保持したまま、値でソートする最も効率的な方法は何ですか?
2023-05-16 11:10:44
質問
jQueryを持っていますが、組み込みのソートヘルパーがあるかどうかわかりません。私は各アイテムの2次元配列を作成することができました。
text
,
value
そして
selected
プロパティがありますが、javascript に組み込まれている
Array.sort()
は正しく動作しないと思います。
どのように解決するのですか?
オプションを一時的な配列に展開し、ソートした後、リストを再構築してください。
var my_options = $("#my_select option");
var selected = $("#my_select").val();
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
if (a.text < b.text) return -1;
return 0
})
$("#my_select").empty().append( my_options );
$("#my_select").val(selected);
Mozilla のソートに関する文書 (特に compareFunction) と ウィキペディアのソートアルゴリズムページ が関連しています。
大文字小文字を区別しないソートを行いたい場合は、以下のように
text
を
text.toLowerCase()
上に示したソート関数は、ソートの方法を示しています。英語以外の言語を正確にソートすることは複雑です ( unicode照合順序アルゴリズム ). 使用方法 ロケール比較 を使うのは良い解決策です。
my_options.sort(function(a,b) {
return a.text.localeCompare(b.text);
});
関連
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] setTimeout(fn, 0)が役に立つことがあるのはなぜですか?
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] JavaScriptでオブジェクトの配列から明確な値を取得する方法は?
-
[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する
-
[解決済み] jQuery - セレクトコントロールの選択値をテキスト記述で設定する
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 大文字・小文字を区別しない文字列比較を行うには?
-
[解決済み] JavaScriptで文字列をソートする方法
-
[解決済み】Javascript : 英数字の文字列の自然なソート
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] jQueryを使ったオプション要素のアルファベット順ソート