javascript - jQuery 选择更改时的交换选项

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
}