get selected index attribute

hi
how can i get an attribute setting frrom the selected index of a selectbox?
ex: <option value="1" style="color:green;">Hello

in other words how do i get "color:green;"? assuming it is the selected index?

thanks ...
LVL 25
dgrafxAsked:
Who is Participating?
 
haloexpertsexchangeCommented:
Sorry I did not realize what you were asking about.
You do it like this $('option:selected',this).attr('style') and it works.
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <script src="./javascript/jquery.js" type="text/javascript"></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $('select').change(function(){
               $('div').html($('option:selected',this).attr('style'));
           });
           });
       </script>
    </head>
    <body>
        <select>
            <option value="1" style="color:green;">Hello</option>
            <option value="2" style="color:red;">Hello2</option>
            <option value="3" style="color:blue;">Hello3</option>
        </select>
        <input type="button" value="Change the Color">
        <div>TODO write content</div>
    </body>
</html>

Open in new window

0
 
haloexpertsexchangeCommented:
$('select option:selected').attr('style') will get the value of the style attribute for the selected index.
0
 
dgrafxAuthor Commented:
i've tried that
i'm using this - is that the problem?
can you give an example using this please
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
haloexpertsexchangeCommented:
It works with this code.
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <script src="./javascript/jquery.js" type="text/javascript"></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $('input:button').click(function(){
               $('div').html($('select option:selected').attr('style'));
           });
           });
       </script>
    </head>
    <body>
        <select>
            <option value="1" style="color:green;">Hello</option>
            <option value="2" style="color:red;">Hello2</option>
            <option value="3" style="color:blue;">Hello3</option>
        </select>
        <input type="button" value="Change the Color">
        <div>TODO write content</div>
    </body>
</html>

Open in new window

0
 
dgrafxAuthor Commented:
right - but i'm saying i NEED to use "this" NOT anything else
ya know like $(this +"option:selected").attr("style") - which doesn't work

thanks
0
 
dgrafxAuthor Commented:
good lord !!!
I was asking this question as a round about way of figuring out why my code wasn't working!!!

I had coded my selectbox attribute (not style) with a value that never changes but had meant to code it with a changing value from a query loop - so was trying to figure out why jquery kept calling the initial setting !!!!

unbelieveable!

I thank you very much for your time - your code is accurate I imagine.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.