Connecting Tech Pros Worldwide Forums | Help | Site Map

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

mikek12004's Avatar
Familiar Sight
 
Join Date: Sep 2008
Location: Athens, Greece
Posts: 188
#1: Jul 1 '09
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's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Jul 1 '09

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:
Expand|Select|Wrap|Line Numbers
  1. sel.options[i] = new Option("text","text");
mikek12004's Avatar
Familiar Sight
 
Join Date: Sep 2008
Location: Athens, Greece
Posts: 188
#3: Jul 1 '09

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


Quote:
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's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Jul 1 '09

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


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).
mikek12004's Avatar
Familiar Sight
 
Join Date: Sep 2008
Location: Athens, Greece
Posts: 188
#5: Jul 1 '09

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
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Jul 1 '09

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


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.
Plater's Avatar
Moderator
 
Join Date: Apr 2007
Location: New England
Posts: 7,161
#7: Jul 1 '09

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
mikek12004's Avatar
Familiar Sight
 
Join Date: Sep 2008
Location: Athens, Greece
Posts: 188
#8: Jul 1 '09

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


Isn't defaultSelected and selected doing the same thing?
Plater's Avatar
Moderator
 
Join Date: Apr 2007
Location: New England
Posts: 7,161
#9: Jul 1 '09

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


Quote:

Originally Posted by mikek12004 View Post

Isn't defaultSelected and selected doing the same thing?

That's how I feel, but that's how I've seen it referenced
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Jul 1 '09

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.
mikek12004's Avatar
Familiar Sight
 
Join Date: Sep 2008
Location: Athens, Greece
Posts: 188
#11: Jul 2 '09

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?)
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#12: Jul 2 '09

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.
mikek12004's Avatar
Familiar Sight
 
Join Date: Sep 2008
Location: Athens, Greece
Posts: 188
#13: Jul 2 '09

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)?
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Jul 2 '09

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


Yes:
Expand|Select|Wrap|Line Numbers
  1. sel.options.length
Plater's Avatar
Moderator
 
Join Date: Apr 2007
Location: New England
Posts: 7,161
#15: Jul 9 '09

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
Reply


Similar JavaScript / Ajax / DHTML bytes