Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

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?

You are here: irt.org | FAQ | JavaScript | Form | Q1265 [ previous next ]

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?'

©2018 Martin Webb