Update element index on select option selection using jQuery

Question

I have a basic table:

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

For each of these ".priority-select select" elements, I need to append option tags, with values of the indexes, and the current index with the selected attribute. Example:

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

I'm using this snippet to do that:

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

I don't know how to begin the next part, which is updating the table rows based on the selection a user makes.

I.e. the user selects in the third row's select, the row is removed from the order, set as the first row, and then all the rows are reordered and reindexed so on the next selection the user will be able to change the order and get it right. This would be done after selecting the option and not having to submit anything else.

Any help would be appreciated.

You might be happier with a plugin like tablesorter.com/docs — user2625787
– user2625787, Commented Oct 23, 2013 at 18:09
I'm already using datatables, but it is a good idea to look there since I haven't even thought about that. — o_O
– o_O, Commented Oct 23, 2013 at 18:29

James Montagne · Accepted Answer · 2013-11-01 17:25:57Z

Your question implies that you are already selecting the appropriate number based on index, but I don't see that in your code. You can do that as follows:

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

Then for the re-ordering:

$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

I took a look and it appears this is going to do the trick. I'll check it out closer, but it appears you've satisfied this question very nicely. Thanks.

Collectives™ on Stack Overflow

Update element index on select option selection using jQuery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related