5

このリンクのように、2 つのマルチセレクト ボックスがあります。 http://jsfiddle.net/bdMAF/38/

$(function(){
    $("#button1").click(function(){
        $("#list1 > option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });

    $("#button2").click(function(){
        $("#list2 > option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});

しかし、最初の選択ボックスから2番目の選択ボックスに追加すると、うまくいきます。しかし、2番目の選択ボックスから最初の選択ボックスに追加すると、最初の選択ボックスの最後に追加されます。追加するには、削除した場所に追加する必要があります。

前もって感謝します...

4

3 に答える 3

5

おそらく、属性「無効」を設定して削除するだけで済みますが、オプションに空白が残ります。この方法では、最初にオプションを複製する必要があることに注意してください。

他の解決策は、通常どおりコンテンツを追加することですが、前に sort() 関数を適用することです

function byValue(a, b) {
    return a.value > b.value ? 1 : -1;
};

function rearrangeList(list) {
    $(list).find("option").sort(byValue).appendTo(list);
}

$(function () {
    $("#button1").click(function () {
        $("#list1 > option:selected").each(function () {
            $(this).remove().appendTo("#list2");
            rearrangeList("#list2");
        });
    });

    $("#button2").click(function () {
        $("#list2 > option:selected").each(function () {
            $(this).remove().appendTo("#list1");
            rearrangeList("#list1");
        });
    });
});

このフィドルで試すことができます

于 2013-06-14T12:39:20.217 に答える
1

ある種のインデックスを追跡する必要があります。あなたの場合value、各オプションの を使用できると思います。(ただし、必要に応じて専用のdata-*属性を使用できます)

その値を使用して、現在のリストを検索し、どこに収まるかを確認できます。オプションをループして、移動している値より大きい値を確認します。見つかった場合はその前に挿入し、うまくいかなかった場合は最後に挿入します。

これはそれを行う必要があります：

$("#button2").click(function(){
    $("#list2 > option:selected").each(function(){
        var item = $(this).remove();
        var match = null;
        $("#list1").find("option").each(function(){
            if($(this).attr("value") > item.attr("value")){
                match = $(this);
                return false;
            }
        });
        if(match)
            item.insertBefore(match);
        else
           $("#list1").append(item);
    });
});

逆の場合も同じように適用できます。

これが実際の例です

于 2013-06-14T12:45:31.223 に答える
0

オプションを に追加し直した後、後#list1はシンプルsort()に行います。そのためには、値に基づいて比較関数を追加する必要があります。

$(function () {
    $("#button1").click(function () {
        $("#list1 > option:selected").each(function () {
            $(this).remove().appendTo("#list2");
        });
    });

    $("#button2").click(function () {
        $("#list2 > option:selected").each(function () {
            $(this).remove().appendTo("#list1");
            var opts = $('#list1 option').get();

            $('#list1 ').html(opts.sort(optionSort));
        });
    });

    function optionSort(a, b) {
        return $(a).val() > $(b).val();
    }
});

このJSFiddleをチェックしてください

で変更するtext()代わりに、を使用してソートすることもできます。val()optionSort()

于 2013-06-14T12:52:05.760 に答える