jQuery変更時スワップオプションを選択

Question

フィールドの表示順序をユーザーが選択できるページがあります。ドロップダウンは動的に作成され、フィールドの数に基づいていくつかのオプションがあります。

たとえば、5つのフィールドがある場合は、フィールドを並べ替えるオプション1〜5があります。

私が達成しようとしているのは、ドロップダウンから数値を選択したときに、以前にその位置を保持していたものを「スワップ」することです。

レコード4を3に変更した場合、これらの2つのドロップダウンがスワップされるようになりました。

以下の例では、数値のいずれかのドロップダウンを別の選択肢に変更します。その値を保持していた元の選択肢は更新されますが、実際に変更しているものは新しい値を取得しません。

JSフィドル：https://jsfiddle.net/y7g155mh/4/

<table name="selectedFields" class="table table-condensed selectedFields"> 
    <thead> 
    <tr> 
     <th class="small span1"> 
     <input type="checkbox" id="checkAllSelected"> 
     </th> 
     <th class="small">Field Name</th> 
     <th class="small">Sort Order</th> 
     <th class="small">Sort Type</th> 
     <th class="small">Display Order</th> 
    </tr> 
    </thead> 
    <tbody name="selectedRows"> 
    <tr data-fid="5"> 
     <td class="small"></td> 
     <td class="small">Request ID</td> 
     <td class="small"> 
     <select data-current="1" data-type="sortOrder" class="span1" name="sortOrder"> 
      <option selected="selected" value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select class="span1" name="sortType"> 
      <option value="-">-</option> 
      <option selected="selected" value="ASC">ASC</option> 
      <option value="DESC">DESC</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select data-current="1" data-type="displayOrder" class="span1" name="displayOrder"> 
      <option selected="selected" value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </td> 
    </tr> 
    <tr data-fid="16"> 
     <td class="small"></td> 
     <td class="small">Task ID</td> 
     <td class="small"> 
     <select data-current="2" data-type="sortOrder" class="span1" name="sortOrder"> 
      <option value="1">1</option> 
      <option selected="selected" value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select class="span1" name="sortType"> 
      <option value="-">-</option> 
      <option selected="selected" value="ASC">ASC</option> 
      <option value="DESC">DESC</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select data-current="2" data-type="displayOrder" class="span1" name="displayOrder"> 
      <option value="1">1</option> 
      <option selected="selected" value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </td> 
    </tr> 
    <tr data-fid="9"> 
     <td class="small"></td> 
     <td class="small">Task Start Date</td> 
     <td class="small"> 
     <select data-current="3" data-type="sortOrder" class="span1" name="sortOrder"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option selected="selected" value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select class="span1" name="sortType"> 
      <option value="-">-</option> 
      <option selected="selected" value="ASC">ASC</option> 
      <option value="DESC">DESC</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select data-current="3" data-type="displayOrder" class="span1" name="displayOrder"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option selected="selected" value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </td> 
    </tr> 
    <tr data-fid="17"> 
     <td class="small"></td> 
     <td class="small">Task Completion Date</td> 
     <td class="small"> 
     <select data-current="4" data-type="sortOrder" class="span1" name="sortOrder"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option selected="selected" value="4">4</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select class="span1" name="sortType"> 
      <option value="-">-</option> 
      <option selected="selected" value="ASC">ASC</option> 
      <option value="DESC">DESC</option> 
     </select> 
     </td> 
     <td class="small"> 
     <select data-current="4" data-type="displayOrder" class="span1" name="displayOrder"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option selected="selected" value="4">4</option> 
     </select> 
     </td> 
    </tr> 
    </tbody> 
</table> 

---

$('body').on('change', 'select', function() { 
    saveOrder($(this).val(), $(this).data('type'), $(this).data('current')); 
}); 

// Update the field order numbers and save the data 
function saveOrder(order, type, current) { 
    // First thing we need to do is swap the selected value with the one we are changing it for. 
    $('[name=' + type + ']').find('option[value="' + order + '"]:selected').parent().val(current); 
    return false; 

    // Do something here with storing data 
} 

Answer 1

これはあなたが達成したいものであるように思えます。改善の余地がある。

$('body').on('change', 'select', function() { 
    saveOrder($(this)); 
}); 

// Update the field order numbers and save the data 
function saveOrder(select) { 
    var order = select.val(), 
     type = select.data('type'), 
     current = select.data('current'); 
    $('select[name=sortOrder][data-current="'+current+'"]').val(order); 
    $('select[name=sortOrder][data-current="'+order+'"]').val(current); 
    return false; 
    // Do something here with storing data 
}