Solved

write select multiple options

Posted on 2011-02-27
12
314 Views
Last Modified: 2012-05-11
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
Comment
Question by:dgrafx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
12 Comments
 
LVL 14

Expert Comment

by:R-Byter
ID: 34991905
Can you please post your current code?

Regards
0
 
LVL 25

Author Comment

by:dgrafx
ID: 34991943
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
 
LVL 82

Expert Comment

by:leakim971
ID: 34991945
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
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 
LVL 25

Author Comment

by:dgrafx
ID: 34991964
that is humorous ...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34992127
But given the lack of detail you gave, quite correct.
0
 
LVL 2

Accepted Solution

by:
mhmr earned 500 total points
ID: 34992186
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
 
LVL 25

Author Comment

by:dgrafx
ID: 34992331
Thanks mhmr _ will try that tomorrow - my code is at work ...
0
 
LVL 25

Author Comment

by:dgrafx
ID: 34996649
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
 
LVL 2

Expert Comment

by:mhmr
ID: 34996989
hello dqrafx
Can you tell us what version of jQuery you are using. and what browsers you use.
0
 
LVL 25

Author Comment

by:dgrafx
ID: 34997070
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
 
LVL 2

Expert Comment

by:mhmr
ID: 34997297
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
 
LVL 25

Author Comment

by:dgrafx
ID: 34997331
thanks - i'll look at it ...
0

Featured Post

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question