add/remove <option> items from a <select> using javascript

In a form I have 5 elements (e.g. pictures) and I wish for the user to be able to set the order of appearance. For this I have for each picture a select box (names select1 to select5) with "please select something" as preselected and the rest options are values from 1 to 5. I want when a user selects a number a.k.a ans <option> that number/<option> to be removed from the rest of the select boxes and when the user selects another number the deselected one (previously selected) to appear on the other select boxes How can this be done with Javascript?

re: add/remove <option> items from a <select> using javascript

Instead of that, how about just one select with two buttons on the side "Up" and "Down" to move the selected option up or down to determine the order of appearance?

Anyway, to add an option, use the options array with the Option object:

re: add/remove <option> items from a <select> using javascript

any idea how to do this (how to make the buttons work this way)?

re: add/remove <option> items from a <select> using javascript

You could create a temp. option and swap, e.g. pseudocode
To get the correct option, use the selectedIndex (and selectedIndex-1 for Up and selectedIndex+1 for Down).

re: add/remove <option> items from a <select> using javascript

but then I must also change the order of appearence in the select box also, how to do this (e.g bring an option ot the top)? After that there is also the issue of getting all elements with the correct order from the form to the form's target page

re: add/remove <option> items from a <select> using javascript

That's what would happen. Here's some example code:
This should move the selected option one higher. Of course, you'd need to add some error-checking so that you don't try to access a non-existent option.

re: add/remove <option> items from a <select> using javascript

The more complete creation:
new Option("text","value", defaultSelected, Selected);
Where defaultSelected and Selected are boolean values

re: add/remove <option> items from a <select> using javascript

Isn't defaultSelected and selected doing the same thing?

re: add/remove <option> items from a <select> using javascript

That's how I feel, but that's how I've seen it referenced

re: add/remove <option> items from a <select> using javascript

Not quite technically. defaultSelected is the same as having "selected" in the HTML by default, while selected is a property to set the option to selected via JavaScript.

re: add/remove <option> items from a <select> using javascript

and then I have to pass alll the elements of the select box through post to the form's target page right (and in the proper order) how to do it?
(PS way when I move an option it then is diselected how can it remain selected?)

re: add/remove <option> items from a <select> using javascript

To pass the values, you need to have them all selected, so loop over them and select them when the form is submitted.

To select an option after moving, just set the selected property (of the option) to true.

re: add/remove <option> items from a <select> using javascript

Is there a way in javascript to find how many options a selectcurrently has? (the contents will change dynamically-hte user will be able to remove items from the select box)?

re: add/remove <option> items from a <select> using javascript

Yes:

re: add/remove <option> items from a <select> using javascript

Using:
sel.options.length = 0;
Is a fast wasy to clear out the array. Unsure how javascript does garbage colelction on it