jQuery 변경시 교환 옵션 선택

Question

필드 표시 방법의 순서를 선택할 수있는 페이지가 있습니다. 드롭 다운은 동적으로 생성되며 필드 수에 따라 옵션 수가 많습니다.

예를 들어 5 개의 필드가있는 경우 필드를 정렬 할 수있는 1-5 개의 옵션이 있습니다.

내가 달성하고자하는 것은 드롭 다운에서 숫자를 선택하면 이전에 그 자리에 있었던 번호와 "교환"합니다.

레코드 4를 3으로 변경하면이 두 드롭 다운이 바뀌 었습니다.

아래 예제에서 숫자 드롭 다운 중 하나를 다른 선택 항목으로 변경하십시오. 해당 값을 보유한 원래 선택 사항은 업데이트되지만 변경중인 실제 선택 사항은 새 값을 가져 오지 않습니다.

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 
}