javascript - 選択と並べ替えに値を追加する

Question

他のいずれかの値を選択すると、互いに依存するいくつかの Select があり、以前の値が他の値に追加されます。JQuery で以前の値を Select に追加するにはどうすればよいですか? アルファベット順に並べ替えますか？

Answer 1

値を追加するためのコードが利用可能であるため、select で値をソートするためのコードを次に示します。

function sortOptions()
{
    var arr = [];
    $("#myselect option").each(function(){
        arr.push($(this).html());
    });
    $('#myselect').empty();
    arr.sort();
    var html='';
    for(var i=0;i<arr.length;i++)
    {
        html+='<option>' + arr[i] + '</option>'
    }
    $('#myselect').html(html);
}

Answer 2

並べ替えについてはわかりませんが（理解するのはそれほど難しくありません）、次の<option>ように要素をリストに追加できます。

$("#myselect").append(
    $("<option>").prop("selected", "selected").attr("value", "OptionValue").text("OptionText")
);

への最初の呼び出しprop()は、要素をリストで選択した要素にする必要がある場合のみです。それ以外の場合は省略できます。

編集：私は先に進み、ソート部分を解決しました：

var elems = [];
$("#sortable > option").each(function () {
    elems.push({ key: $(this).val(), value: $(this).text() });
});

elems.sort(function (a, b) {
    if (a.value < b.value) return -1;
    if (a.value > b.value) return 1;
    return 0;
});

$("#sortable").empty();
$.each(elems, function (idx, item) {
    $("#sortable").append(
        $("<option>").attr("value", item.key).text(item.value)
    );
});

Answer 3

DOM要素を実際に「注文」することはできないと思います。

これに対する最善のアプローチは、おそらく、要素を配列に追加する必要のある選択のすべての要素を読み取り、新しい値を配列に追加してからソートすることです。もちろん、このプロセス中に DOM 要素を削除する必要があります。その後、新しく並べ替えた要素を希望の順序で DOM に再度追加します。