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
}