Solved

get multiple selected  values

Posted on 2002-05-13
2
5,328 Views
Last Modified: 2012-05-04
I have a form that has two select boxes with lists of countries. the user can select multiple countries from one box and move them to the other. when they get moved however I need to do some processing on the server side so I created code much like the following example with a javascript function that is supposed to copy the values from the selected items in the box and create a commadilimited list that I can copy into the hidden "Countries" input box on the neccessary form. However I don't know how to create the comma delimited list of selected items. here is what I have (which returns the index position of the first selected item instead of a coma delimited list of all the selected options values)




<script language="JavaScript">
function AddCountries()
{
     var Countries = document.frmSaveDistributionList.unmappedCountriesIds.selectedIndex;
     document.frmAddCountries.Countries.value = Countries;
     document.frmAddCountries.submit();
}
function RemoveCountries()
{
     var Countries = document.frmSaveDistributionList.mappedCountriesIds.selectedIndex;
     document.frmRemoveCountries.Countries.value = Countries;
     document.frmRemoveCountries.submit();
}
</script>

<FORM NAME="frmSaveDistributionList" ACTION="/HMCClubCentral/Index.cfm" METHOD=POST>
<table>
     <tr>
          <td>
               <select multiple name="unmappedCountriesIds" size="7" width="340" style="width=340">
                    <option value="209">South Africa</option>
                    <option value="208">New Caledonia</option>
                    <option value="207">United Kingdom</option>
               </select>
          </td>
          <td align="center" valign="top">
               <a href="" onClick="AddCountries(); return false;">
               <img src="Viewers/Images/add.gif" width="47" height="19" alt="Move the Highlighted Subject to the Choice Box" border="0">
               </a>
               <BR>
               <a href="" onClick="RemoveCountries(); return false;">
               <img src="Viewers/Images/remove.gif" width="67" height="19" alt="Remove the Highlighted Subject from the Choice Box" border="0">
               </a>
          </td>
          <td align="left" valign="top">
               <select multiple name="mappedCountriesIds" size="7" width="340" style="width=340">
                    <option value="204">Taiwan</option>
               </select>
          </td>
     </tr>
</table>

<form name="frmAddCountries" action="/HMCClubCentral/Index.cfm" method="post">
<input type="Hidden" name="dlfrmAction" value="AddCountries">
<input type="Hidden" name="Countries" value="">
</form>
<form name="frmRemoveCountries" action="/HMCClubCentral/Index.cfm" method="post">
<input type="Hidden" name="dlfrmAction" value="RemoveCountries">
<input type="Hidden" name="Countries" value="">
</form>
0
Comment
Question by:Scott Bennett
2 Comments
 
LVL 30

Accepted Solution

by:
third earned 100 total points
ID: 7007512

<SCRIPT>
function getSelectedValues (select) {
  var r = new Array();
  for (var i = 0; i < select.options.length; i++)
    if (select.options[i].selected)
      r[r.length] = select.options[i].value;
  return r;
}

function getSelectedTexts (select) {
  var r = new Array();
  for (var i = 0; i < select.options.length; i++)
    if (select.options[i].selected)
      r[r.length] = select.options[i].text;
  return r;
}

function getSelectedIndices (select) {
  var r = new Array();
  for (var i = 0; i < select.options.length; i++)
    if (select.options[i].selected)
      r[r.length] = i;
  return r;
}

function AddCountries(){
  var Countries = getSelectedValues(document.frmSaveDistributionList.unmappedCountriesIds);
  alert(Countries);
  document.frmAddCountries.Countries.value = Countries;
  document.frmAddCountries.submit();
}

function RemoveCountries(){
  var Countries = getSelectedValues(document.frmSaveDistributionList.mappedCountriesIds);
  alert(Countries);
  document.frmRemoveCountries.Countries.value = Countries;
  document.frmRemoveCountries.submit();
}

</SCRIPT>

the other two functions are optional (getSelectedTexts and getSelectedIndices). it might be also useful for you if you want to return the selected texts or indices.
0
 
LVL 14

Author Comment

by:Scott Bennett
ID: 7009205
Thanks that worked perfectly
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question