ITTreats.com

If you are a Traditional  Javascript  Programmer  and Loving to learn  JQuery,   Let me ask you a Question,  How do you usually  choose selected  Text  or  HTML  of the Option,  I guess  Your Answer would be similar  to selected index innerHTML

1
2

 
document.getElementById('drop').options[document.getElementById('drop').selectedIndex].innerHTML;

But In JQuery We can Grab this with a very simple and handy Selector. :selected

If you dont know about I am talking to, Just Download the JQuery Cheat Sheet and have a look .. Oh !! Mine We can do almost anything … Coming back to the Question , JQuery Has got :selected Selector which now we are using for the dropdownbox ..

To Grab the HTML of the selected Dropdown

1
2

 
$('#drop :selected').text();</strong>

and for its value

1

$('#drop :selected').val();

Thats it …….

Here is the Working Example :

1
2
3
4
5
6
7
8
9
10
11

<select  id='drop'>
<option  value="1">One </option>
<option  value="2">Two</option>
<option  value="3">Three</option>
</select>
 
<div  id='helptext'></div>
 
<script>
$('#drop').change(function(){  var text=  " TEXT  :: "+ $('#drop :selected').text()  + "VALUE :: "+$('#drop :selected').val();  $('#helptext').html(text);      });
</script>

Written by adrevol

{adrevol has written 91 posts on ITTreats.com . See all posts by adrevol}