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,sel Dest){
var opts = selSrc.options;
for(var i=opts.length-1; i>=0; i--){
if(opts[i].selected){
selDest.appendC hild(opts[i]);
}
}
}
function copyAll(selSrc, selDest){
var opts = selSrc.options;
for(var i=opts.length-1; i>=0; i--){
selDest.appendC hild(opts[i]);
}
}
</script>
</head>
<body>
<form action="#" id="selSwap">
<fieldset>
<legend>Swapi ng multiselect fun</legend>
<div>
<select multiple="multi ple" name="left" id="left">
<option value="1">Apple </option>
<option value="2">Orang e</option>
<option value="3">Banan a</option>
<option value="4">Grape </option>
</select>
</div>
<div>
<input type="button" value="Add"
onclick="copy(t his.form.left,t his.form.right) " />
<input type="button" value="Add All"
onclick="copyAl l(this.form.lef t,this.form.rig ht)" />
<input type="button" value="Remove"
onclick="copy(t his.form.right, this.form.left) " />
<input type="button" value="Remove All"
onclick="copyAl l(this.form.rig ht,this.form.le ft)" />
</div>
<div>
<select multiple="multi ple" name="right" id="right">
<option value="a">red</option>
<option value="b">orang e</option>
<option value="c">yello w</option>
<option value="d">purpl e</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>
