Home Articles FAQs XREF Games Software Instant Books About Feedback Search Site-Map
irt.org logo

Q910 How can I pass selections back and forth between two multiple select options?

irt.org | Knowledge Base | JavaScript | Form 4 | Q910 [ previous next ]

Q910 How can I pass selections back and forth between two multiple select options?

Try the following (it crashed my browser a few times though!):

<script language="JavaScript"><!--
function deleteOption(object,index) {
    object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        if (fromObject.options[i].selected)
            addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        if (fromObject.options[i].selected)
            deleteOption(fromObject,i);
    }
}

function copyAll(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        deleteOption(fromObject,i);
    }
}
//--></script>

<form>

<table><tr><td>

<select name="select1" multiple size="7">
<option>zero
<option>one
<option>two
<option>three
<option>four
<option>five
<option>six
</select>

</td><td>

<input type="button" value=" > " onClick="if (document.images) copySelected(this.form.select1,this.form.select2)">
<p>
<input type="button" value=" < " onClick="if (document.images) copySelected(this.form.select2,this.form.select1)">
<p>
<input type="button" value=">>" onClick="if (document.images) copyAll(this.form.select1,this.form.select2)">
<p>
<input type="button" value="<<" onClick="if (document.images) copyAll(this.form.select2,this.form.select1)">

</td><td>

<select name="select2" multiple size="7">
</select>

</td></tr></table>

</form>

Feedback on 'Q910 How can I pass selections back and forth between two multiple select options?'


Provide feedback ...
AddThis Social Bookmark Button

Provide feedback ... AddThis Social Bookmark Button


Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.
Copyright © 1996-2008 irt.org, All Rights Reserved.