jQuery Выберите опцию Swap при изменении

Question

У меня есть страница, которая позволяет пользователю выбирать порядок отображения полей. Паузы вниз динамически создаются, и у вас есть только количество опций, основанных на количестве полей.

Например, если есть 5 полей, у вас есть варианты 1-5 для сортировки полей.

То, что я пытаюсь выполнить, - это когда вы выбираете число из выпадающего списка, оно «свопирует» это число с тем, что ранее удерживало это место.

Если я изменил запись с 4 по 3, эти два выпадающих списка теперь будут заменены ... если это имеет смысл.

В приведенном ниже примере измените одно из числовых выпадающих списков на другой вариант. Исходный выбор, который сохранил это значение, обновляется, но фактический, который вы изменяете, не получает нового значения.

JS Fiddle: 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 
}