次のような選択リストがあります。
<select id="testSelect">
<option value="option1" label="1">Option 1</option>
<option value="option3" label="3">Option 3</option>
<option value="option5" label="5">Option 5</option>
</select>
ラベルを使用して、オプションを表示する順序を制御しています。最初の選択リストは正しい順序になっています (項目が欠落しているにもかかわらず)。
この選択リストに新しいオプションをプログラムで追加したいと思います。この質問を見つけて、優れたjquery select cheat sheetへのリンクを提供してくれました。
このチート シートは、特定のインデックスにオプションを追加する次のコードを提供します。これは、私がやりたいことと似ています。
$("#elementid option:eq(0)").after("<option value='4'>Some pears</option>"
ただし、特定のインデックスの後に新しいオプションを挿入する必要はありません (これらの項目は複数回削除され、再度追加されるため)、ラベルの値に基づいて正しい順序でオプションを挿入する必要があります。
私は2つのことを試しました:
$(function () {
$("#testSelect option:eq(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method A
$("#testSelect option:label(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method B
});
メソッド A は、リストの 2 番目の項目の後に新しい項目を挿入します。これにより、リストは次のようになります。1 3 2 5
メソッド B は例外をスローします。Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: label
ただし、方法 B が機能したとしても、ラベルの付いたオプションが1
実際には存在しない可能性があるため、まだ問題があります。私が本当にやりたいことは、特定のオプション要素がその周りに存在するかどうかに関係なく、(ラベルに基づいて) リストの正しい場所に新しいオプションを挿入することです。
これを行う方法はありますか?jsfiddle