0

私はulをソート可能にしようとして完全に立ち往生しており、更新関数内でul内のアイテムの新しい順序で（非表示の）選択をソートします

これが私の機能です

jQuery(document).ready(function ($) {
function sort() {
    $('.element').sortable({
        update: function (event, ui) {
            var draggingElement = $('.item');
            draggingElement.each(function () {
                var ordering = $(this).index();
                var option = 'opt' + ordering + '';
                $("#list").find('#' + option + '').index(ordering);
            });
        }
    });
};
sort();
});

これが私のhtmlです

<ul class="element">
  <li class="item">0</li>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>
<select name="list1" multiple="true" class="list_hidden" id="list">
  <option id="opt0" selected="selected" value="0">0</option>
  <option id="opt1" selected="selected" value="1">1</option>
  <option id="opt2" selected="selected" value="2">2</option>
  <option id="opt3" selected="selected" value="3">3</option>
</select>

私は本当に何をすべきかわからない、私はまた、オプションの配列を作成し、それらをソートして選択に追加しようとしましたが、私は完全に間違っていると思います

多分誰かがすでにこれを解決しましたか？

選択はmultiple=trueでなければなりません

ここに私の問題を視覚化するためのフィドルがあります

http://jsfiddle.net/JKjD5/4/

ヒントを事前に感謝します

4

1 に答える 1

1

あなたはこれを行うことができます:(動作していますが最適化されていません）

jQuery(document).ready(function ($) {
  function sort() {
    $('.element').sortable({
    update: function (event, ui) {
      var draggingElement = $('.item');
      $("#list").empty();
      draggingElement.each(function () {
        $("#list").append($('<option />').attr('id','opt'+$(this).text()).attr('value',$(this).text()).attr('selected', 'selected').text($(this).text()));
     });
  }
});
};
sort();
});

今ではフィドルで動作します

data必要に応じて、リストにいくつかを保存しliて、次のように並べ替え関数内で使用できます。

<li class='item' data-rel='opt45' data-value='123' >text</li>

そして、次のようにそれらを取得します:(.eachソート関数の）

$(this).attr('data-value');
于 2013-03-26T14:55:32.667 に答える