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>

我正在使用此代码段来执行此操作：

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

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

1 个答案: