Convert contents of a drop-down box and store them in a var

jason_kelly · 01-24-2013, 08:03 PM

Hello,

This may seem easy to the experts out there,

But, how can I go about converting the contents of a drop down (select box) and store them into a comma separated var?

[DROP DOWN]
abdcef1
ghijklm2
nopqrs3
tuvwx4
yz0007

expected result:

var x = abdcef1,ghijklm2,nopqrs3,tuvwx4,yz0007

Much thanks and appreciation for all your help and support.

Cheers,

Jay

WolfShade · 01-24-2013, 08:09 PM

First you'd have to declare a variable for the string (like "thisList"), get the element and find its length, then loop through every option and grab either the value or the text, then append each followed by a comma. Once done, substring(thisList.length-1) to remove the last comma.

var thisList, elem = document.getElementById("selectID"), elemLen = elem.length;
for(var i = 0; i < elemLen; i++){
thisList += document.getElementById("selectID")[i].value + ",";
}
thisList = thisList.substring(thisList.length-1);
alert(thisList);

Untested.

jason_kelly · 01-24-2013, 08:26 PM

Thanks Wolf,

I couldn't get it to fire.

Code:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function test() {

var elem = document.getElementById('box1').length

	for(var i = 0; i < elem i++){
		var x = document.getElementById('box1')[i].value + ",";
	}
	
	x = thisList.substring(thisList.length - 1);
		alert(x);
}

</script>



</head>

<body>
<select id="box1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> 

<input type="submit" value="Submit" onclick="test()">

</body>

</html>

WolfShade · 01-24-2013, 08:57 PM

You're missing some code. And some makes no sense. You don't declare "thisList" anywhere, nor append anything to it, but then you try to get a substring of it.

Code:

function test() {  
  var thisList, elem = document.getElementById('box1'), elemLen = elem.length;
  for(var i = 0; i < elemLen; i++){
         thisList += document.getElementById('box1')[i].value + ",";
     }
         var x = thisList.substring(thisList.length - 1);
         alert(x); 
}

thisList is the string to contain the list.
elem is short for element, the source.
elemLen is element length.

jason_kelly · 01-24-2013, 09:13 PM

Thanks Wolf.

I tried your revised code, no errors, but an alert box with just a comma appears.

Any idea?

Jay

WolfShade · 01-24-2013, 09:21 PM

I'm playing around with it. Hang on.

UPDATE: Okay, this will alert ONLY what options are selected, not the whole thing (unless all are selected.)

Code:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function test() {  
  var thisList = "", elem = document.forms["thisTest"].box1, elemLen = elem.length;
  for(var i = 0; i < elemLen; i++){
         if(elem.options[i].selected){ thisList += elem.options[i].value + ","; }
     }
         var x = thisList.substring(0,thisList.length - 1);
         alert(x); 
}

</script>



</head>

<body>
<form name="thisTest" id="thisTest">
<select id="box1" name="box1" multiple="multiple">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> 

<input type="button" value="Submit" onclick="test()">
</form>
</body>

</html>

Copy/paste all the code, as I made changes to the HTML, too.

Philip M · 01-25-2013, 07:47 AM

My understanding is that he wishes to place all the select options in a comma delimited string variable, not just the selected ones. (Why???)

Code:

<select id = "mysel">
<option value = "abcdef1">abcdef1</option>
<option value = "ghijklm2">ghijkl2</option>
<option value = "nopqrs3">nopqrs3</option>
<option value ="tuvwx4">tuvwx4</option>
<option value ="yz0007">yz007</option>
</select>

<script type = "text/javascript">
var x = "";
for (var i =0; i<document.getElementById("mysel").length; i++) {
x += document.getElementById("mysel").options[i].value + ",";
}
x = x.replace(/,$/,"");
alert (x);

</script>

The Egyptians were all drowned in the dessert. Afterwards Moses went up to Mount Cyanide to get the ten commandments.