element attribute affectation behaves like a move instead of a copy

09-18-2006

Hi,

Assume that right and left are multiple select elements. It's about the
following line :

right.options[i]=left.options[j];

It copies the content of left.options[j] into right.options[i], but
*removes* the content of the first one !

It's hard to google with relevant keywords. Do you know if it's a
normal behaviour of Javascript ?

Tested on Firefox 1.5.x/Windows.

Regards,

--
Mounir.

09-18-2006

Mounir wrote:
> Hi,
>
> Assume that right and left are multiple select elements. It's about the
> following line :
>
> right.options[i]=left.options[j];
>
> It copies the content of left.options[j] into right.options[i], but
> *removes* the content of the first one !
>
> It's hard to google with relevant keywords. Do you know if it's a
> normal behaviour of Javascript ?

Not really a matter of JavaScript but, of the particular DOM being
manipulated by the javascript. I see the behavior you described in
Firefox but, in IE6 it simply removes from the right list.

> Tested on Firefox 1.5.x/Windows.
>
> Regards,
>
> --
> Mounir.
What is it that you are actually trying to do ?

09-19-2006

> > right.options[i]=left.options[j];

First, I apologize not have given an HTML sample with my message.

Paul wrote :
> Not really a matter of JavaScript but, of the particular DOM being
> manipulated by the javascript. I see the behavior you described in
> Firefox but, in IE6 it simply removes from the right list.

What ? You mean it doesn't even perform the affectation ?

> What is it that you are actually trying to do ?

You know, two multiple selection lists, with "Add", "Add All",
"Remove", "Remove All" buttons, respectively to add from the first list
to the second, to add all from the first list to the second, to remove
one and remove all with same ways.

The behavior of Firefox allows me to not create options instances
(javascript command new Option()), so I wondered if it was indeed a
normal behavior and not some bug in my source code. And as the target
browser is Firefox, that's cool

Thank you and regards,

--
Mounir

09-19-2006

Mounir wrote:
> > > right.options[i]=left.options[j];
>
> First, I apologize not have given an HTML sample with my message.
>
> Paul wrote :
> > Not really a matter of JavaScript but, of the particular DOM being
> > manipulated by the javascript. I see the behavior you described in
> > Firefox but, in IE6 it simply removes from the right list.
>
> What ? You mean it doesn't even perform the affectation ?
>
> > What is it that you are actually trying to do ?
>
> You know, two multiple selection lists, with "Add", "Add All",
> "Remove", "Remove All" buttons, respectively to add from the first list
> to the second, to add all from the first list to the second, to remove
> one and remove all with same ways.
>
> The behavior of Firefox allows me to not create options instances
> (javascript command new Option()), so I wondered if it was indeed a
> normal behavior and not some bug in my source code. And as the target
> browser is Firefox, that's cool

>
> Thank you and regards,
>
> --
> Mounir
Ah, that is something I can work with

See if this will work for you.

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select test</title>

<style type="text/css">
#selSwap fieldset{
width: 30em;
height: 10em;
}
#selSwap fieldset div{
display:block;
width: 30%;
float:left;
}
#selSwap fieldset div input, select{
margin-left: 1em;
width: 90%;
font-family: monospace;
}

#selSwap fieldset div input{
height: 1.5em;
margin-top: 0.5em;
}
#selSwap fieldset div select{
height: 10em;
}
</style>

<script type="text/javascript">
function copy(selSrc,selDest){
var opts = selSrc.options;
for(var i=opts.length-1; i>=0; i--){
if(opts[i].selected){
selDest.appendChild(opts[i]);
}
}
}

function copyAll(selSrc,selDest){
var opts = selSrc.options;
for(var i=opts.length-1; i>=0; i--){
selDest.appendChild(opts[i]);
}
}
</script>

</head>

<body>

<form action="#" id="selSwap">
<fieldset>
<legend>Swaping multiselect fun</legend>
<div>
<select multiple="multiple" name="left" id="left">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Banana</option>
<option value="4">Grape</option>
</select>
</div>
<div>
<input type="button" value="Add"
onclick="copy(this.form.left,this.form.right)" />
<input type="button" value="Add All"
onclick="copyAll(this.form.left,this.form.right)" />
<input type="button" value="Remove"
onclick="copy(this.form.right,this.form.left)" />
<input type="button" value="Remove All"
onclick="copyAll(this.form.right,this.form.left)" />
</div>
<div>
<select multiple="multiple" name="right" id="right">
<option value="a">red</option>
<option value="b">orange</option>
<option value="c">yellow</option>
<option value="d">purple</option>
</select>
</div>
</fieldset>
</form>

</body>

</html>

09-19-2006

Paul wrote:
<snip>> <?xml version="1.0" encoding="utf-8" ?>
> <!DOCTYPE html
> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
<snip>
> <input type="button" value="Add"
> onclick="copy(this.form.left,this.form.right)" />
<snip>

You realise that the common HTML shortcut of referencing named and IDed
elements as named properties of the FORM element is non-standard and
should not be expected to be available in XHTML DOMs?

You should probably be suing DOM standard - this.form.elments.left -
(and similar) if you want to script XHTML DOMs.

Richard.

09-19-2006

Richard Cornford wrote:
> Paul wrote:
> <snip>> <?xml version="1.0" encoding="utf-8" ?>
> > <!DOCTYPE html
> > PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> > <html xmlns="http://www.w3.org/1999/xhtml">
> <snip>
> > <input type="button" value="Add"
> > onclick="copy(this.form.left,this.form.right)" />
> <snip>
>
> You realise that the common HTML shortcut of referencing named and IDed
> elements as named properties of the FORM element is non-standard and
> should not be expected to be available in XHTML DOMs?
>
> You should probably be suing DOM standard - this.form.elments.left -
> (and similar) if you want to script XHTML DOMs.
>
> Richard.
True

09-20-2006

Paul wrote:
> Mounir wrote:
> > Hi,
> >
> > Assume that right and left are multiple select elements. It's about the
> > following line :
> >
> > right.options[i]=left.options[j];
> >
> > It copies the content of left.options[j] into right.options[i], but
> > *removes* the content of the first one !

The "=" character is an assignment operator, it assigns the value of
the right hand side to the value of the left hand side - it isn't a
"copy" operator.

I guess your quandry is to work out what should happen when a reference
to a DOM element is assigned to the value of another DOM element
reference. To take much of the guesswork out of the equation, use DOM
methods (preferably W3C) when DOM elements are involved.

Of course you still need to test widely to ensure browsers are
compliant with whatever standard you have used.

> > It's hard to google with relevant keywords. Do you know if it's a
> > normal behaviour of Javascript ?
>
> Not really a matter of JavaScript but, of the particular DOM being
> manipulated by the javascript. I see the behavior you described in
> Firefox but, in IE6 it simply removes from the right list.

In IE, option elements and DOM just don't like each other, hence the
use of new Option() when creating options rather than createElement. A
DOM version of the above (i.e. to move an option from one select to
another) would be:

right.appendChild(left.options[i]);

Which works fine in Firefox & Safari at least, but not IE.

--
Rob

09-20-2006

> The "=" character is an assignment operator, it assigns the value of
> the right hand side to the value of the left hand side - it isn't a
> "copy" operator.

Sure, actually i meant "it copies the reference" by "copies the
content", so an assignment.

> I guess your quandry is to work out what should happen when a reference
> to a DOM element is assigned to the value of another DOM element
> reference.

Yes. But, please, do you have an explanation for this behavior ?

> To take much of the guesswork out of the equation, use DOM
> methods (preferably W3C) when DOM elements are involved.

Thanks. http://www.w3.org/TR/REC-DOM-Level-1/ seems to be a good
starting point.

> Of course you still need to test widely to ensure browsers are
> compliant with whatever standard you have used.

Yeah, in first time, I will code for firefox (this is an intrant
applications, which assumes that the browser client will be FF).

> In IE, option elements and DOM just don't like each other, hence the
> use of new Option() when creating options rather than createElement. A
> DOM version of the above (i.e. to move an option from one select to
> another) would be:
> right.appendChild(left.options[i]);
>
> Which works fine in Firefox & Safari at least, but not IE.

I've just seen in the previous link a pretty method, in
chapter 2: Document Object Model (HTML) Level 1 :

void add(in HTMLElement element, in HTMLElement before)

It seems to be from a set of specific HTML DOM methods. No problem to
use it, right ?

Regards,

--
Mounir.

09-20-2006

> Ah, that is something I can work with

> See if this will work for you.

Thank you

I hope you haven't passed much time to do.

Interesting line :

> selDest.appendChild(opts[i]);

So appendChild() *removes* the refererence of child from the previous
parent node.

Thanks !

Regards,

--
Mounir

09-20-2006

I wrote :
> Yes. But, please, do you have an explanation for this behavior ?

Err... in Paul's reply (xhtmI file) I think I got the answer... The
assignment behaves like a DOM child moving (i.e. appendChild()). Right
?

Regards,

--
Mounir

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
affectation in if statement	Paul Rubin	Python	11	03-16-2010 03:40 PM
move, instead of copy, assignment	Jonathan Lee	C++	5	08-11-2009 05:36 PM
double signal affectation	titi	VHDL	1	03-07-2007 05:17 PM
Dynamic VLAN affectation + AP1100 + freeradius	caroline brunel	Cisco	1	05-27-2005 06:31 AM
affectation, et copie	mourad	C++	6	10-22-2003 04:08 PM