asked on

Get the text of selected option when changes

hi,

I have the following select

<div class="availableResourcesDiv">
<select  id="availableResources">
<option value="-1">None selected</option>
<option value="123">Philip Smith</option>
<option value="456">Ian Smith</option>
</select>
    </div>

Open in new window

I am capturing the selection like this:

  $(".myDiv").change(function () {


});

Open in new window

If the user selects "Philip Smith" how can I grab that name text from within my change event.

$(this).Text() - just gives me the text of all the options.

So I need something like this!

$(".myDiv").change(function () {

$(this).TextForSelectedOption()

});

thanks

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MrKevorkian

ASKER

thanks guys

HainKurt

What was wrong with my post...

Text : $("#availableResources option:selected").text()
Value : $("#availableResources").val() or $("#availableResources option:selected").val()

did you try these? Any comment?

nap0leon

Hainaut - I like your method better... I updated my site to use that instead of how I had been doing it.

HainKurt

but my post is just ignored and I did not get any points, even if it gives solution with a working sample, and even the author used the second post as solution (which is long way of doing the same thing - jQuery is trying to make things simpler, shorter, easier), did not say anything about the first one...

this question should be reviewed again... later, if somebody refers to this page, everybody will think that it is not working or wrong! but it is the way how jQuery should be used, simpler...

MrKevorkian

ASKER

Hainkurt, thankyou for your answer, and i am sorry i didnt give you the points.
You were correct up to a point, but if you check my question again

in particular this line:

$(".myDiv").change(function () {

I am capturing the selected item via a change event on the div.
Therefore i wont be referencing the select by Id.

So what I needed to do was the following

   $(".myDiv").change(function () {

  var nameOfResource = jQuery(this).find("option[value='" + userId + "']").text();

Open in new window

Therefore the answer that nap0leon gave, solved my problem, in particular this bit in bold.

("#availableResources option[value='" + selectedVal + "']").text()

That is the reason I awarded nap0leon the points.
But thanks again for your help.

HainKurt

again, if you are not referencing it by id, you could... you know the id of select box...
say you dont know, and you dont want to use id... then

$("option:selected", $(this)).text()

also, you should not use div change event for this purpose, you should use select change event...

here is both sample...

<html>
<head>
			<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function() {
	$("#availableResources").change(function(){
		alert($("#availableResources option:selected").text());
		alert($("option:selected", $(this)).text());
	});
});
</script>
</head>

<body>

<div class="availableResourcesDiv">
<select  id="availableResources">
<option value="-1">None selected</option>
<option value="123">Philip Smith</option>
<option value="456">Ian Smith</option>
</select>
</div>
    
</body>
</html>

Open in new window

I don't see why it is not usable for you... If you want to use the long way, it is up to you...

MrKevorkian

ASKER

Hi HainKurt, thanks for replying. If you contact the admins, I will split the points. Sorry about the mix up.

MrKevorkian

ASKER

Thanks everyone.