Download multiple select box widget


Put this into your <HEAD> section

Put this into your <BODY> section


You create two multiple selectboxes like this:
<select multiple name="fromBox" id="fromBox">
  <option value="3">Finland</option>
  <option value="4">France</option>
  <option value="6">Mexico</option>
  <option value="1">Norway</option>
  <option value="5">Spain</option>  
  <option value="2">United Kingdom</option>
<select multiple name="toBox[]" id="topBox">
  <option value="12">Canada</option>
  <option value="13">Germany</option>
  <option value="11">United States</option>

Then you call a javascript function which initializes the script:
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');

The arguments to this function are:

  • "fromBox" - the id of the first selectbox(<select multiple name="fromBox" id="fromBox">)
  • "toBox" - the id of the last selectbox(<select multiple name="toBox[]" id="toBox">)
  • 500 - Total width of widget
  • 300 - Total height of widget
  • "Available countries" - Label above first select box
  • "Selected countries" - Label above last select box

Submit the form

When you submit a form, only the selected elements in a select box is submitted. This means that you need some Javascript that selects all the elements in your select box when the form is submitted. This could be an onsubmit event to your form. Example:
<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">


Does nt works like the demo, what i have to do?
fer at 01:59PM, 2011/04/23.
Hi,I'm trying to use this Ajax script with php. When i write $values = $_POST['toBox'];echo $values;It should print all the values of list box 'toBox'But it is not doing that.Can someone help?Thanks
Warren at 12:48PM, 2011/04/27.
Admin comment
Fer,I need more info from you in order to help you. What happen when you try this script?Warren,Make sure that you have added the onsubmit event to your <form> tag:<form method="post" action="multiple_select.html" onsubmit="multipleSelectOnSubmit()">
DHTMLGoodies at 02:58PM, 2011/04/27.
Hi there,As it is given above:The arguments to this function are:* "fromBox" - the id of the first selectbox()* "toBox" - the id of the last selectbox()Basically, according to my requirement I want the user to select items from AVAILABLE and it will go in SElECTED. Now whatever is selected, i want those values to go in my MySql Query.Here is the example.In PHP as you know, if you want to print all the values of a list/select box, we use $_POST['toBox'];I want the value of 'toBox' to be print in this manner: '12','13','11'For this i'm using a function called implode$mySelect = implode("','",$_POST['toBox']);$countries = "'".$mySelect1."'";echo $countries;Now here it doesn't print any value. It just give me ''If i removecreateMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); and write the same code it works perfectly fine
Warren at 04:55AM, 2011/05/01.
Should view Demo
kabir at 08:41AM, 2011/06/27.
Ganesh  B
This is useful. But I want values that it fetch from database based on that i have to select options...
Ganesh B at 07:00AM, 2011/08/06.
HiThis is really helpful, but how can I keep the selected values in the selected box, so that users can delete or add more to the currently selected?
Matt at 08:33PM, 2011/10/03.
very very googtanks
mahdi at 02:25PM, 2012/01/31.
hello, the scripts is so good... but i cant pass all "vars" in "toBox"... how i can get it... i call a "multipleSelectOnSubmit" function when the form submit... like as the sample... thanks.
hello... at 05:48PM, 2012/02/07.
a little problem in the sample
i found a little problem in the file that you have to download... in this line:<select multiple name="toBox" id="toBox">when i read your sample appear...<select multiple name="toBox[]" id="toBox">
a little problem in the sample at 05:57PM, 2012/02/07.
Please Help
Please help , post some example how can this SELECTED countries can be added into MYQSL with PHP. I try $_REQUEST['toBox[]']; and $_POST['toBox[]'];but can't get any result.And i have added onsubmit='multipleSelectOnSubmit()'; in the FORM.Thanks
Please Help at 10:16PM, 2012/05/19.
James D Smith
Been using this for years. Suddenly when I move an item from "First" to "Second" list, it deletes 2 items in the "First" list. Not true going the other way though, if I move from the "Second" list to the "First" list, only the item selected is removed.
James D Smith at 07:16PM, 2019/09/10.
Medicament information leaflet. Long-Term Effects.
<a href="">buying cheap lyrica for sale</a> in the USA
All information about medicine. Read information now.
GklZY at 11:54PM, 2021/04/25.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021