CODEWITHSUNDEEP
jquery
tjsimmons
tjsimmons

Reputation: 733

Removing an option from a select and adding it to another

Okay, so I've had this code that used to work just fine. I recently upgraded my jQuery from 1.4.4 to 1.5.2, and apparently this has quit working. However, I've tried the code with 1.4.4. and 1.3.2 and it won't work there, either.

This did work. I can't figure out why it isn't. Any help?

Edit: start and end are arguments, with the text of the select element's ID.


var selectedIndex = document.getElementById(start).selectedIndex; // get the selected index from the correct select box

if (selectedIndex != -1) {      // if something is selected, do the following:
       var selectedElement = document.getElementById(start).options[selectedIndex]; // get the element that's selected

       if (selectedIndex == (document.getElementById(start).options.length - 1) && selectedIndex != 0) {
           selectedIndex--; // if we're at the bottom of the list, set our selectedIndex variable to the one right before it
       }

       $("#" + start).remove(selectedElement);  // remove the selected element from the start side          
       $("#" + end).append(selectedElement);        // and add it to the end of the ending side
}

Here's an example of an option I want to move.
<option sortable="yes" datatype="string" value="foo" type="arbitrary">Foo</option>

The issue I'm getting is apparently within jQuery itself - using the full version,
expr.replace is not a function [Break On This Error] expr = expr.replace( /\=\s*([^'"]])\s]/g, "='$1']" ); [jquery-latest.debug.js, line 4540]
The error happens when I hit the $.remove portion of the code.

Thanks.

Upvotes: 6

Views: 1441

Answers (3)

mattsven
mattsven

Reputation: 23303

You are getting this error because .remove() takes a string selector, and if none is supplied, removes those of the parent object. Try

$(selectedElement).remove();

Upvotes: 4

Ben
Ben

Reputation: 338

Is there a reason you're using the getElementById calls? Let jQuery do the work for you... Instead of using:

$("#" + start).remove(selectedElement);  // remove the selected element from the start side          
$("#" + end).append(selectedElement);        // and add it to the end of the ending side

}

try using:

$("#"+start+" option:selected").appendTo("#" + end);

It combines the remove/append operations into one, and may solve your problem.

Upvotes: 2

Shadow Wizzard
Shadow Wizzard

Reputation: 66396

Unfortunately, <option> is not ordinary element so it might cause such problems.

See the accepted answer on this question for code that should work.

Upvotes: 0

Related Questions