PDA

View Full Version : Resolved 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:



<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.


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:



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:


<!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:


<!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>