1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Leeds, UK
    Rep Power

    Multiple SELECTs using Javascript

    I had a problem recently that I eventually solved with the help of this forum and a bit of trial and error that may be of use to others.

    I wanted to create a FORM with a SELECT object which allowed multiple selections. It started off empty (i.e. no OPTION statements) and Javascript was used to create a number of OPTIONS. The SELECT object was to be invisible to the user.

    The form was then POSTed and the recipient PHP file retrieved the OPTION values using $_POST (I was using PHP4).

    I couldn't get it to work using information found in the PHP and Javascript manuals (it would only retrieve one OPTION value - the last one added to the list). After scouting around a bit, I found that the code at the end of this message worked, which to me wasn't that obvious!!

    The subtleties that caused the thing to work properly were:

    1) Each SELECT item's name needed "[]" after it - this told the POSTing function that there was more than one selected item to send.
    2) Each SELECT item needed an id as well as a name, but without the "[]" - this enabled the Javascript code to work.

    The FORM definition:

    <form action="updateNews.php" method="post" name="theData" style="display:none">
    <select name="newItems[]" multiple="multiple" id="newItems"></select>

    The FORM is eventually submitted using a button on another FORM which calls the Javascript function "submitChanges()".

    The Javascript:

    function submitChanges() {

    function updateTheData() {
    with (document.theData) {
    for (i=0; i<linkArray.length; i++) {
    newItems.options[i] = new Option(i.toString(), newItemArray[linkArray[i]], false, true);

    The "linkArray" and "newItemArray" had been previously populated by the user.
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Rep Power



    the prob is, that all the optins must be selected before submitting, with the result that the array will be built propperly.

    i recently also was seeking for a solution of that problem and finally found a clue! maybe u mind this code sample:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript1.2">
    function addToList(listField, newText, newValue) {
       if ( ( newValue == "" ) || ( newText == "" ) ) {
          alert("You cannot add blank values!");
       } else {
          var len = listField.length++; 
          listField.options[len].value = newValue;
          listField.options[len].text = newText;
          listField.selectedIndex = len;
    function removeFromList(listField) {
       if ( listField.length == -1) { 
          alert("There are no values which can be removed!");
       } else {
          var selected = listField.selectedIndex;
          if (selected == -1) {
             alert("You must select an entry to be removed!");
          } else {  // Build arrays with the text and values to remain
             var replaceTextArray = new Array(listField.length-1);
             var replaceValueArray = new Array(listField.length-1);
             for (var i = 0; i < listField.length; i++) {
                // Put everything except the selected one into the array
                if ( i < selected) { replaceTextArray[i] = listField.options[i].text; }
                if ( i > selected ) { replaceTextArray[i-1] = listField.options[i].text; }
                if ( i < selected) { replaceValueArray[i] = listField.options[i].value; }
                if ( i > selected ) { replaceValueArray[i-1] = listField.options[i].value; }
             listField.length = replaceTextArray.length; 
             for (i = 0; i < replaceTextArray.length; i++) { 
                listField.options[i].value = replaceValueArray[i];
                listField.options[i].text = replaceTextArray[i];
    function selectAllOpts(){
     with (document.TheData){
      if ( selected_value.length == -1) {
       alert("There are no values which can be removed!");
      } else {
       for (var i = 0; i < selected_value.length; i++) {
        selected_value.options[i].selected = true;
    <form method="post" name="TheData" id="TheData" onsubmit="selectAllOpts();">
    <input type="text" name="textfield">
    <input name="removeItm" type="button" id="removeItm" onClick="removeFromList(selected_value);" value="remove">
    <input name="addItm" type="button" id="addItm" onClick="addToList(selected_value, textfield.value, textfield.value);"value="add"> 
    <select name="selected_value[]" id="selected_value" size="6" multiple>
    <input name=submit type=submit value="submit">
    The texfields values will be added to the list at runtime. before submitting the form, all optins will be selected (function: selectAllOpts), so that $http_post_vars contains the array of all(!) selected values.
    Last edited by matrixcruiser; July 10th, 2003 at 03:17 AM.

IMN logo majestic logo threadwatch logo seochat tools logo