Question

我有一个页面，允许用户选择字段的显示顺序。下拉列表是动态创建的，您只有基于字段数量的选项数量。

例如，如果有5个字段，则可以使用选项1-5对字段进行排序。

我想要完成的是当您从下拉列表中选择一个数字时，它会将该数字与之前持有该数字的数字“交换”。

如果我将记录4更改为3，那么现在将交换这两个下降...如果这是有道理的。

在下面的示例中，将其中一个数字下拉菜单更改为其他选项。保持该值的原始选择已更新，但您正在更改的实际值不会获得新值。

<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
}

jQuery选择更改时的交换选项

1 个答案: