CODEWITHSUNDEEP
jqueryhtmlhtml-select
NinjaBoy
NinjaBoy

Reputation: 3755

jquery - How to return html select option to its original order?

I have two Select lists, between which you can move selected options. When I move options back over to the left list, I would like them to retain their original position in the list order, even if the list is missing some original options.

Here is my code: http://jsfiddle.net/6qUyK/1/

Upvotes: 1

Views: 590

Answers (3)

Ilia G
Ilia G

Reputation: 10221

Enjoy :) http://jsfiddle.net/liho1eye/6qUyK/7/

Upvotes: 2

Jake Feasel
Jake Feasel

Reputation: 16945

Here's my solution: http://jsfiddle.net/6qUyK/4/

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12314

You have to store the original position value. You can use the data attribute for this.

Take a look at this example.

Store original position:

$(option).data('original-position',i);

Retrieve original position:

$('#listboxFootballPlayers option').eq($(this).data('original-position')).before($(this));

Note that some of your code is unnecessary. For example you can use the append method (or before, or after) to actually move the selected element, so no need to create a new one and destroy the previous one.

Also you have to adjust the code a little to work for the last item in the list. My code is just a hint.

Upvotes: 3

Related Questions