使用jQuery更新选择选项的元素索引

Question

我有一个基本表：

<table>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
</table>

对于每个".priority-select select"元素，我需要在选项标签后附加索引值，并在当前索引后附加selected属性。 例：

<table>
    <tr>
        <td class="priority-select">
           <select>
             <option value="1" selected>1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
           </select>
        </td>
    </tr>
    ............. to n rows
</table>

我正在使用此代码段来做到这一点：

var $selects = $(".select");
  var selCount = $selects.length;
  for(var i=1; i<=selCount; i++){
    $selects.append("<option value='" + i + "'>" + i + "</option>");
  };

我不知道如何开始下一部分，即根据用户所做的选择更新表行。

也就是说，用户在第三行的选择中进行选择，将该行从订单中删除，设置为第一行，然后对所有行进行重新排序并重新索引，以便在下一个选择中，用户将能够更改订单并获得订单对。 这将在选择选项之后完成，而不必提交其他任何内容。

任何帮助，将不胜感激。

Answer 1

您的问题暗示您已经在根据索引选择适当的数字，但是我在您的代码中看不到。 您可以按照以下步骤进行操作：

function renumber() {
    // select the appropriate number for each
    $("select").val(function (i) {
        return i + 1;
    });
}

然后进行重新排序：

$selects.change(function () {
    var $this = $(this);
    var val = $this.val();
    var $row = $this.closest("tr");
    var $parent = $row.parent();

    $row.detach();
    var $nextRow = $parent.find("tr:eq(" + (val-1) +")");

    if($nextRow.length > 0){
        $nextRow.before($row); 
    } else {
        $parent.append($row);
    }

    renumber();
});

http://jsfiddle.net/BKHcb/1