jQuery选择更改时的交换选项

Question

I have a page that allows a user to select the order of how fields are displayed. The drop downs are dynamically created and you only have the number of options based on the number of fields there are.

For example, if there are 5 fields, you have options 1-5 to sort your fields by.

What I am trying to accomplish is when you select a number from the dropdown, it "Swaps" that number with whatever one previously held that spot.

If I changed Record 4 to 3, those two drop downs would now be swapped... if that makes sense.

In the example below, change one of the numeric dropdowns to another choice. The original choice that held that value is updated but the actual one you are changing doesn't get the new value.

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

It seems like this is what you want to achieve. There is room for improvement.

$('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
}