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

[mikek12004]

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?

[acoder]

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:

sel.options[i] = new Option("text","text");

[mikek12004]

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?

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

[acoder]

You could create a temp. option and swap, e.g. pseudocode

temp = option above
option above = current option
current option = temp;

To get the correct option, use the selectedIndex (and selectedIndex-1 for Up and selectedIndex+1 for Down).

[mikek12004]

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

[acoder]

That's what would happen. Here's some example code:

var i = sel.selectedIndex;
var temp = sel.options[i-1]; // the option above
sel.options[i - 1] = new Option(sel.options[i].text,sel.options[i].value);
sel.options[i] = temp;

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.

[Plater]

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

[mikek12004]

Isn't defaultSelected and selected doing the same thing?

[Plater]

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

[acoder]

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.

[mikek12004]

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

[acoder]

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.

[mikek12004]

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

[acoder]

Yes:

sel.options.length

[Plater]

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