使用 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" 元素中的每一个，我需要附加选项标签、索引值和当前索引以及所选属性。示例：

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

我正在使用这个 sn-p 来做到这一点：

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