469,572 Members | 1,447 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,572 developers. It's quick & easy.

populating eslctboxes

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.

Jul 20 '05 #1
5 1170
bigbuddha <ne******@bigbuddha.be> writes:
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[i].selected) {
from.options[i].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,thi s.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.se l1,
this.form.elements.sel2);">
<input type="button" value="remove"
onclick="moveSelectedOptions(this.form.elements.se l2,
this.form.elements.sel1);">
<select multiple="multiple" name="sel2"
ondblclick="moveOption(this,this.selectedIndex,thi s.form.elements.sel1)">
</select>
</form>
---
Tested in IE 6, Opera 7, Mozilla FB, and Netscape 4, where only Netscape 4
looked bad and didn't understand ondblclick.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
On Sun, 04 Jan 2004 18:33:27 +0100, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
bigbuddha <ne******@bigbuddha.be> writes:
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
<script></script>/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!!

Jul 20 '05 #3
bigbuddha <ne******@bigbuddha.be> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4
> 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[i].selected) {
["myselect[]"].options[i].selected=false;
moveOption( ["myselect[]"],i,to);
} else {
i++;
}
}

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

thanks again

--
Bigbuddha
www.bigbuddha.be

Jul 20 '05 #5
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[i].selected) {
["myselect[]"].options[i].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.

Read <3F**************@PointedEars.de> for details.
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[i];
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?
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.