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

Q1265 How can I pass selections back and forth between two multiple select options, but have ALL the options (selected or otherwise) in the second select list passed back to the server?

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

Q1265 How can I pass selections back and forth between two multiple select options, but have ALL the options (selected or otherwise) in the second select list passed back to the server?

Try something like:

<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);
    }
}

function populateHidden(fromObject,toObject) {
    var output = '';
    for (var i=0, l=fromObject.options.length;i<l;i++) {
            output += escape(fromObject.name) + '=' + escape(fromObject.options[i].value) + '&';
    }
    alert(output);
    toObject.value = output;
}
//--></script>

<form name="myForm" onSubmit="populateHidden(document.myForm.select2,document.myForm.hidden1)">

<table><tr><td>

<p>
<select name="select1" multiple size="7">
<option value="0">zero
<option value="1">one
<option value="2">two
<option value="3">three
<option value="4">four
<option value="5">five
<option value="6">six
</select>
</p>

</td><td>

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

</td><td>

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

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

<input type="submit" value="Submit">
<input type="hidden" name="hidden1">

</form>

Feedback on 'Q1265 How can I pass selections back and forth between two multiple select options, but have ALL the options (selected or otherwise) in the second select list passed back to the server?'


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.