0

次のような選択リストがあります。

<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

4

2 に答える 2

4

[]for 属性セレクターを使用する必要があります。ここで利用可能なセレクターについて読むことができますhttp://api.jquery.com/category/selectors/

$("#testSelect option[label=yourvalue]").after("<option value='option2' label='2'>Option 2</option>"); //Method B

そう

$("#testSelect option[label=1]") // will grab <option value="option1" label="1">Option 1</option>

そして、その要素の後に新しいオプションが挿入されます

それに応じて要素を並べ替えることができます

$(function() {    
    $('#testSelect option')
          .add($("<option value='option7' label='7'>Option 7</option>"))
          .sort(function(a, b) {
                return a.label < b.label ? -1 : a.label > b.label ? 1 : -1;
          }).appendTo('#testSelect');
});​

http://jsfiddle.net/5ksh7/

于 2012-12-12T16:21:52.370 に答える
2

これはどう？

jsFiddle の例

新しいオプションをどこにでも挿入して、ラベルの値に基づいてオプションを並べ替えることができます。

$("#testSelect").append("<option value='option2' label='2'>Option 2</option>");

$("#testSelect option").sort(function(a, b) {
    if ($(a).attr('label') < $(b).attr('label')) return -1;
    if ($(a).attr('label') > $(b).attr('label')) return 1;
    return 0;
}).appendTo('#testSelect');​
于 2012-12-12T16:30:17.520 に答える