populating eslctboxes

[bigbuddha]

Hello,

I have a form two multiple selectboxes.
Firs one with options, second one empty
I need to select a few items and hit an "add" button to get them in
the second one. Preferably a "remove" button to.
the second selectbox's name is "gen_list[]' cause i need it in for db
handling. This might be something to keep in mind.

If it's possible a re-useable funtion so i can use it for different
slectboxes.

someone ??
thank you.

 

[Lasse Reichstein Nielsen]

Hello,

I have a form two multiple selectboxes.
Firs one with options, second one empty
I need to select a few items and hit an "add" button to get them in
the second one. Preferably a "remove" button to.
the second selectbox's name is "gen_list[]' cause i need it in for db
handling. This might be something to keep in mind.

If it's possible a re-useable funtion so i can use it for different
slectboxes.

It should be possible to make one.
---
<script type="text/javascript">
function moveOption(from,index,to) {
var origOpt = from.options[index];
var newOpt = new Option(origOpt.text,origOpt.value);
from.options[index]=null;
to.options[to.options.length] = newOpt;
}

function moveSelectedOptions(from,to) {
var i=0;
while (i<from.options.length) {
if (from.options.selected) {
from.options.selected=false;
moveOption(from,i,to);
} else {
i++;
}
}
}
</script>
---
And an example use of it:
---
<form action="" onsubmit="return false">
<select multiple="multiple" name="sel1"
ondblclick="moveOption(this,this.selectedIndex,this.form.elements.sel2)">
<option value="X1">Text 1</option>
<option value="X2">Text 2</option>
<option value="X3">Text 3</option>
<option value="X4">Text 4</option>
<option value="X5">Text 5</option>
</select>
<input type="button" value="add"
onclick="moveSelectedOptions(this.form.elements.sel1,
this.form.elements.sel2);">
<input type="button" value="remove"
onclick="moveSelectedOptions(this.form.elements.sel2,
this.form.elements.sel1);">
<select multiple="multiple" name="sel2"
ondblclick="moveOption(this,this.selectedIndex,this.form.elements.sel1)">
</select>
</form>

 

[bigbuddha]

/L

Thanks that worked great, i only can give the second selectbox the
name "list[]". The square brackets don't seem to work in the
javascript. Any sollution for this?

thansk!!

 

[Lasse Reichstein Nielsen]

Thanks that worked great, i only can give the second selectbox the
name "list[]". The square brackets don't seem to work in the
javascript. Any sollution for this?

That's a Frequently Asked Question. Check
<URL:http://jibbering.com/faq/#FAQ4_39>
and
<URL:http://jibbering.com/faq/#FAQ4_25>
(although we have since found out that *names* lie "list[]" are not
illegal in (X)HTML, the solution still works).

/L

 

[Bigbuddha]

That's a Frequently Asked Question. Check

<URL:http://jibbering.com/faq/#FAQ4_39>
and
<URL:http://jibbering.com/faq/#FAQ4_25>
(although we have since found out that *names* lie "list[]" are not
illegal in (X)HTML, the solution still works).

/L

thnk you lasse for setting me up. I have looked at both links but i cant
seem to implement it.

while (i< ["myselect[]"].options.length) {
if ( ["myselect[]"].options.selected) {
["myselect[]"].options.selected=false;
moveOption( ["myselect[]"],i,to);
} else {
i++;
}
}

does not work.
How do i implement the ["myselect[]"].options.length correctly?

thanks again

 

[Thomas 'PointedEars' Lahn]

Bigbuddha wrote:

Who wrote this? Please include a *short* attribution, like the above.
vvvvvvvv

[FAQ]

thnk you lasse for setting me up. I have looked at both links but i cant
seem to implement it.

while (i< ["myselect[]"].options.length) {
if ( ["myselect[]"].options.selected) {
["myselect[]"].options.selected=false;
moveOption( ["myselect[]"],i,to);
} else {
i++;
}
}

This is fantasy code. "[...]" initializes an Array object which does
neither have an native "options" property nor has this non-existing
object a "length" property. Read the FAQ, specs and manuals, and use
the "elements" collection instead. Additionally, you /can/ use the
"while" statement, but ECMAScript provides also a C-like "for" statement
which is good use for iteration. This also avoids the next error: You
must increment *always*, else you will not iterate at all.

does not work.

"Does not work" is a useless error description.

How do i implement the ["myselect[]"].options.length correctly?

Quickhack:

// Insert the form element's index (zero-based), id or name here
// ,-----------------------------'
// v
var oSelect = document.forms[...].elements['myselect[]'];
if (oSelect)
{
for (var i = 0; i < oSelect.options.length; i++)
{
var o = oSelect.options;
if (o.selected)
{
o.selected = false;
moveOption(oSelect, i, to);
}
}
}


HTH

PointedEars

P.S.
You should care more about your Subject header. It is the first thing
one sees of your posting. If the Subject is already bad, what should
one expect from the article?