0

複数選択のスタイルを設定するためにui.multiselect.jsを使用しています。両側はドラッグ可能で、左側はソート可能で、変更できません。私がやりたいことは、ボタンを押して、そのボタンで 4 つの選択項目a, b, c, dを右から左に移動し (それらを と呼びます) $('#mySelect').val()、順番に表示 (および 内に格納) しa, d, b, cます。

選択項目を簡単に左に移動させることはできますが、順序を変更すると困惑します。関連するコンテンツをエコーアウトするように関数に指示しました_moveOptionNode(item)が、1 つのパラメーターしか受け入れないため、あまり役に立たないことに気付きました。その関数はオプションで.insertAfter()andを呼び出します.prependTo()が、これまでのところ、それらを直接呼び出すこともできませんでした。

過去の経験から、選択したオプションの順序が$('#mySelect').val()ビジュアルとともに更新されることはわかっています。これは私がやっていることにとって重要ですが、現在のビルドでは最初ui.multiselect.jsの順序を更新できないことも知っています. $('#mySelect').val()したがって、オプションをドラッグする方法を模倣するか、最初から希望どおりに並べ替える方法が必要であることは明らかです。

私はまだこれに取り組んでいますが、これまでのところ成功していません。このコミュニティが提供できる助けを大いに感謝します.

4

1 に答える 1

0

これを行う方法は、multiselect ui 要素に影響を与えるのではなく、HTML 要素を操作することです。次の 2 行のコードで実現しました。

$(".selected li:contains('d')", $($('#mySelect').parent()[0])).insertAfter($(".selected li:contains('a')", $($('#mySelect').parent()[0])))

$("#mySelect option[value='d']").insertAfter($("#mySelect option[value='a']"))

もちろん、この方法には明らかな弱点があります。文字 d を含むすべての視覚要素を移動し、文字 a を含むすべての視覚要素の後にコピーするためです。要素を選択する方法。ここで本当に重要だったのは全体的な方法であり、それがわかったので、あとはケーキです。

編集:これが私の最終的なコードです:

var previtem = null;
var prevvalue = '';
$.each(values, function(i, item) {
    var text = $("#mySelect option[value='"+item+"']").text();
    $('#mySelect').multiselect("select", text);
    $.each($('.selected li:contains('+text+')', $($('#mySelect').parent()[0])), function(i, item) {
        if ($(item).text() == text) {
            // We only move it if it's not the first one in
            // By definition it won't be moved to the start, so this will always work
            if (previtem != null) {
                $(item).insertAfter(previtem);
            }
            previtem = $(item);
        }
    });
    // Again, only move the option if it's not the first one in
    if (prevvalue != '')
        $("#mySelect option[value='"+item+"']").insertAfter($("#mySelect option[value='"+prevvalue+"']"));
    prevvalue = item;
});
于 2013-09-17T22:17:58.337 に答える