• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

write select multiple options

have some code that writes selectbox options - seen different methods
having difficulty writing select multiple size="5" options

can someone post some example code that writes select multiple options so i can evaluate what the difference is

thanks
0
dgrafx
Asked:
dgrafx
1 Solution
 
R-ByterCommented:
Can you please post your current code?

Regards
0
 
dgrafxAuthor Commented:
no - its on my machine at work.
just thought i'd get some ideas so i can start in on it tomorrow at work

you understand that i just need some working code that i can look at - right?
when i google i'm inundated with writing multiple selectboxes instead of writing select multiple ...
0
 
leakim971PluritechnicianCommented:
Check this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<select multiple="multiple" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select>
</body>
</html>

Open in new window

0
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
dgrafxAuthor Commented:
that is humorous ...
0
 
Michel PlungjanIT ExpertCommented:
But given the lack of detail you gave, quite correct.
0
 
mhmrCommented:
Here is a way to create a select box with multiple & size=5:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Manage Menues</title>
    <script src="jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
 	<script type="text/javascript">
	
	function createSB(parentId, id, obj)
	{
		jQuery("#"+parentId).append('<select multiple="multiple" size="5" id="'+id+'"></select>');
		jQuery.each(obj, function(val, text) {
			jQuery('#'+id).append(
			jQuery('<option></option').val(val).html(text)
		);})
	}
	</script>

  </head>

<body>

<div id="div">
</div>

<script type="text/javascript">
	createSB("div","cc",["1","2","3","4","5","6"])
</script>

</body>
</html>

Open in new window


also you can visit this link for more manipulation :
http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/
0
 
dgrafxAuthor Commented:
Thanks mhmr _ will try that tomorrow - my code is at work ...
0
 
dgrafxAuthor Commented:
mhmr - again thanks ...
it turns out that the problems i'm having (js errors) has to do with a jquery onchange function when selectbox is multiple.
I thought possibly the error was in the way I was writing the box - but now I can see that the method is identicle and also one can do it different ways.

any ideas on a general js error "object doesn't support this property or method" when I change the select multiple value (onchange)?
the same code works perfect with select single.
I know thats a vague question - just wondering if anything comes to mind.
thanks
0
 
mhmrCommented:
hello dqrafx
Can you tell us what version of jQuery you are using. and what browsers you use.
0
 
dgrafxAuthor Commented:
1.4 and have been testing with ie8 is where get the error i stated above

with ff - onchange event doesnt fire but firebug doesnt say anything
0
 
mhmrCommented:
i tried the (onchange) on ie8 and ff and googl chrome. it works fine and here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Manage Menues</title>
    <script src="jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
 	<script type="text/javascript">
	
	function createSB(parentId, id, obj)
	{
		jQuery("#"+parentId).append('<select multiple="multiple" size="5" id="'+id+'"></select>');
		jQuery.each(obj, function(val, text) {
			jQuery('#'+id).append(
			jQuery('<option></option').val(val).html(text)
		);})
	}
	</script>

  </head>

<body>

<div id="div">
</div>
<div id="selectedItems">
</div>

<script type="text/javascript">
	createSB("div","cc",["1","2","3","4","5","6"]);
	
	$('#cc').change(function(){
		var selectedItems = '';
		$(this).find('option:selected').each(function () {
		selectedItems += ('i selected: ' + $(this).text()) + '<br />';
		}) 
		$('#selectedItems').html(selectedItems);
	});
</script>

</body>
</html>

Open in new window

0
 
dgrafxAuthor Commented:
thanks - i'll look at it ...
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now