HTML SlectBox Values alignment from CheckBox


#1

Hi, Can somebody look below code to see why I am not able to print values in line by line.
Now it printing all in one line.

Below is the working code :

<%@page pageEncoding="Cp1252" contentType="text/html; charset=Cp1252" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/>
<title></title>
<script type="text/javascript">

function printit() {


	
	//alert(document.myform.fruit.length);
	var prodElement = document.getElementById('movefruitdrink');
	var value = " ";

  for(var i = 0;i<document.myform.fruit.length;i++){
		if(document.myform.fruit[i].checked){
			value = value + document.myform.fruit[i].value +"\
";
		}
	}
	
	prodElement.options[document.myform.fruit.length] = new Option(value,value);
    //document.getElementById("print").innerHTML = value;
	
}

</script>
</head>
	<body>
		<form name="myform">
			Check all Favorite Fruits and Drinks : <br>
			
			Select Fruits : <br>
			<input TYPE=checkbox name=fruit VALUE=apples onclick="printit()"> Apples <BR>
			<input TYPE=checkbox name=fruit VALUE=grapes onclick="printit()"> Grapes <BR>
			<input TYPE=checkbox name=fruit VALUE=oranges onclick="printit()"> Oranges <BR>
			<input TYPE=checkbox name=fruit VALUE=melons onclick="printit()"> Melons <BR>
			
			Select Drinks : <br>
			<input TYPE=checkbox name=fruit VALUE=coke onclick="printit()"> Coke <BR>
			<input TYPE=checkbox name=fruit VALUE=pepsi onclick="printit()"> Pepsi <BR>
			<input TYPE=checkbox name=fruit VALUE=Dr.Pepper onclick="printit()"> Dr.Pepper <BR>
			<input TYPE=checkbox name=fruit VALUE=sprite onclick="printit()"> Sprite <BR>
			
			
			<div id="print"></div>
			List Box : <br>
			<select  name="movefruitdrink" id="movefruitdrink" multiple="multiple" size="10">
							<!-- Will be added dynamically -->
			</select>
		</form>
	
	</body>
</html>



I need output like below : if you select check box.
apples
grapes
oranges
.
.
etc
I don't wanlt like : applesgrapesoranges......etc


#2

I see that you're wanting to add them dynamically to the select list.
There's a useful tutorial on doing this at http://www.javascriptkit.com/javatutors/selectcontent.shtml