Download multiple select box widget

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

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>
<select multiple name="toBox[]" id="topBox">
  <option value="12">Canada</option>
  <option value="13">Germany</option>
  <option value="11">United States</option>
</select>

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

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()">

Comments

fer
Does nt works like the demo, what i have to do?
fer at 01:59PM, 2011/04/23.
Warren
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
DHTMLGoodies
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.
Warren
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.
kabir
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.
Matt
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.
mahdi
very very googtanks
mahdi at 02:25PM, 2012/01/31.
hello...
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.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com