By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,117 Members | 2,178 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,117 IT Pros & Developers. It's quick & easy.

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

mikek12004
100+
P: 200
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?
Jul 1 '09 #1
Share this Question
Share on Google+
14 Replies


acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. sel.options[i] = new Option("text","text");
Jul 1 '09 #2

mikek12004
100+
P: 200
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)?
Jul 1 '09 #3

acoder
Expert Mod 15k+
P: 16,027
You could create a temp. option and swap, e.g. pseudocode
Expand|Select|Wrap|Line Numbers
  1. temp = option above
  2. option above = current option
  3. current option = temp;
To get the correct option, use the selectedIndex (and selectedIndex-1 for Up and selectedIndex+1 for Down).
Jul 1 '09 #4

mikek12004
100+
P: 200
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
Jul 1 '09 #5

acoder
Expert Mod 15k+
P: 16,027
That's what would happen. Here's some example code:
Expand|Select|Wrap|Line Numbers
  1. var i = sel.selectedIndex;
  2. var temp = sel.options[i-1]; // the option above
  3. sel.options[i - 1] = new Option(sel.options[i].text,sel.options[i].value);
  4. 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.
Jul 1 '09 #6

Plater
Expert 5K+
P: 7,872
The more complete creation:
new Option("text","value", defaultSelected, Selected);
Where defaultSelected and Selected are boolean values
Jul 1 '09 #7

mikek12004
100+
P: 200
Isn't defaultSelected and selected doing the same thing?
Jul 1 '09 #8

Plater
Expert 5K+
P: 7,872
@mikek12004
That's how I feel, but that's how I've seen it referenced
Jul 1 '09 #9

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 1 '09 #10

mikek12004
100+
P: 200
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?)
Jul 2 '09 #11

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 2 '09 #12

mikek12004
100+
P: 200
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)?
Jul 2 '09 #13

acoder
Expert Mod 15k+
P: 16,027
Yes:
Expand|Select|Wrap|Line Numbers
  1. sel.options.length
Jul 2 '09 #14

Plater
Expert 5K+
P: 7,872
Using:
sel.options.length = 0;
Is a fast wasy to clear out the array. Unsure how javascript does garbage colelction on it
Jul 9 '09 #15

Post your reply

Sign in to post your reply or Sign up for a free account.