Solved

Pass list box selected value and associated text to a js function

Posted on 2011-03-02
4
535 Views
Last Modified: 2012-08-13
Hello Experts,

I have a select:
<select id="myselect" onChange="parent.myfunction(selected value, selected option)">
<option value='abc'>123</option>
<option value='def'>456</option>
</select>

If the user selects 456. How do I pass 456 and the associated 'def' value.

Thanks
Dipen

0
Comment
Question by:jagku
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
Here's one way to do it:

<script>
function myfunction(thisSelect)
{
	alert('name: ' + thisSelect.options[thisSelect.selectedIndex].name)
	alert('value: ' + thisSelect.options[thisSelect.selectedIndex].value)
}
</script>

<select id="myselect" onChange="myfunction(this)">
<option name=123 value='abc'>123</option>
<option name=456 value='def'>456</option>
</select>

Open in new window

0
 
LVL 2

Assisted Solution

by:mhmr
mhmr earned 100 total points
Comment Utility
Hi jaqku
here is a sample code
<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  
 <script>
	$(document).ready(function() { 
		$('#myselect').change(function(){
			var txt = $(this).find('option:selected').text();
			var val = $(this).find('option:selected').val();
			alert(txt + '  -- >  ' + val);
		});
	});

 </script>
</head>
<body style="font-size:62.5%;">

<select id="myselect" onChange="parent.myfunction(selected value, selected option)">
	<option value='abc'>123</option>
	<option value='def'>456</option>
</select>

</body>
</html>

Open in new window

0
 
LVL 16

Accepted Solution

by:
sjklein42 earned 400 total points
Comment Utility
With an improvement thanks to mhmr:I forgot about the "text" attribute.

<script>
function myfunction(thisSelect)
{
	alert('text: ' + thisSelect.options[thisSelect.selectedIndex].text)
	alert('value: ' + thisSelect.options[thisSelect.selectedIndex].value)
}
</script>

<select id="myselect" onChange="myfunction(this)">
<option value='abc'>123</option>
<option value='def'>456</option>
</select>

Open in new window

0
 

Author Closing Comment

by:jagku
Comment Utility
Perfect - many thanks!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Form submit issue 11 52
Where to begin studying? 5 63
How is NULL an Object in Javascript? 4 25
onOpen 14 35
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now