Get multiple select text

**bigalo** · 04-23-2009, 04:46 PM

Hello,

Could someone please help! I would like to get the grouping of the selected text to display in the alert at one time and not one by one. For instance, if I select 3 options in the list, show me the text for those 3 options selected in the alert. Here is what I have so far:

Code:

<html>
    <head>
    <title> </title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function check(myForm){
       for (var i = 0; i < document.form1.myList.length; i++) {
          if (document.form1.myList.options[i].selected == true) {
             alert("The selected text value is: " + document.form1.myList.options[i].text);
          }
       }
    }
    -->
    </script>
    <form name=form1>
    <select name="myList" multiple>
    <option value=1>One
    <option value=2>Two
    <option value=3>Three
    <option value=4>Four
    </select><P>
    <input type="button" value="Get Text Value" onClick='check(this.form)'>
    </form>
    </body>
    </html>

**forum_amnesiac** · 04-23-2009, 05:01 PM

You can build the alert string inside your loop and do the alert afterwards

**bigalo** · 04-23-2009, 05:04 PM

Could you provide a sample? I've tried it a few ways previously and no luck.
Thx!

**forum_amnesiac** · 04-23-2009, 05:10 PM

Not positive if this will work but try it.

Code:

function check(myForm){
var chkmsg="The selected text value is:";
       for (var i = 0; i < document.form1.myList.length; i++) {
          if (document.form1.myList.options[i].selected == true) {
             chkmsg=chkmsg +" - "+ document.form1.myList.options[i].text);
          }
       }
     alert(chkmsg);
    }

**bigalo** · 04-23-2009, 05:26 PM

Beautiful! This is exactly what I wanted! Thanks allot!

Cheers!

**jscheuer1** · 04-23-2009, 06:10 PM

You have a typo (highlighted and red - it should be removed), but the concept is sound:

Originally Posted by forum_amnesiac

Code:

function check(myForm){
var chkmsg="The selected text value is:";
       for (var i = 0; i < document.form1.myList.length; i++) {
          if (document.form1.myList.options[i].selected == true) {
             chkmsg=chkmsg +" - "+ document.form1.myList.options[i].text);
          }
       }
     alert(chkmsg);
    }

And there are a few other niceties that could be added:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript">
   function check(theForm, theList){
    theForm = theForm.tagName.toLowerCase() === 'form'? theForm : theForm.form;
    theList = theForm.elements[theList];
    var chkmsg = '', intro = 'The selected text value', qntfyr = ' is: ', add = '', i = 0;
    for (i; i < theList.length; ++i) {
     if (theList.options[i].selected === true) {
      if (chkmsg.length){
       add = ', ';
       qntfyr = 's are: ';
      }
      chkmsg += [add, theList.options[i].text].join('');
     }
    }
    chkmsg = chkmsg.replace(/,([^,]+)$/, ', and$1');
    alert([intro, qntfyr, chkmsg, '.'].join(''));
   }
  </script>
 </head>
 <body>
  <form action="#">
   <div>
    <select name="myList" multiple>
     <option value=1>One</option>
     <option value=2>Two</option>
     <option value=3>Three</option>
     <option value=4>Four</option>
    </select>
    <p>
     <input type="button" value="Get Text Value" onclick="check(this, 'myList')">
    </p>
   </div>
  </form>
 </body>
</html>

**bigalo** · 04-23-2009, 06:12 PM

Thanks John, but I did initially catch that and removed it from my code. Good catch!

**forum_amnesiac** · 04-23-2009, 06:55 PM

Thanks for picking up on the typo, I was about to go eat so hurriedly modified the code and missed the ")"

**jscheuer1** · 04-24-2009, 05:57 AM

No biggie. This was just one of those times where I got carried away with the code. I made yet another version which now uses arrays instead of regular expression to format the output when there are more than one items selected. This is supposed to be more efficient, though in this case I'm not really sure. I also now take into account the possibility that no items might be selected. Both my versions work off the form as passed in the onclick event, rather than naming it in the function:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript">
   function check(theForm, theList){
    theForm = theForm.tagName.toLowerCase() === 'form'? theForm : theForm.form;
    theList = theForm.elements[theList];
    var chkmsg = '', intro = 'The selected text value', qntfyr = ' is: ', add = '', i = 0, last = '';
    for (i; i < theList.length; ++i) {
     if (theList.options[i].selected === true) {
      if (chkmsg.length && !add){
       add = ', ';
       qntfyr = 's are: ';
      }
      chkmsg = [chkmsg, add, theList.options[i].text].join('');
     }
    }
    chkmsg = chkmsg.split(',');
    if (chkmsg.length > 1){
     last = [', and', chkmsg.pop()].join('');
    }
    if (chkmsg[0]){
     alert([intro, qntfyr, [chkmsg.join(','), last].join(''), '.'].join(''));
    }
    else{
     alert('No items selected.');
    }
   }
  </script>
 </head>
 <body>
  <form action="#">
   <div>
    <select name="myList" multiple>
     <option value=1>One</option>
     <option value=2>Two</option>
     <option value=3>Three</option>
     <option value=4>Four</option>
    </select>
    <p>
     <input type="button" value="Get Text Value" onclick="check(this, 'myList')">
    </p>
   </div>
  </form>
 </body>
</html>

Thread: Get multiple select text

Thread Tools

Search Thread

Get multiple select text

Bookmarks

Bookmarks

Posting Permissions