SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    London, United Kingdom
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getting value from select drop down with jquery issue.

    I have 2 select drop downs. Using jquery selector syntax i should be able to get the value of each drop down when i change them.

    It works for the first select box, but does not access the second, that is why it comes up with the same value.

    Any ideas why this is happening? I remember accessing this by class a while ago and it worked just fine.


    <script type='text/javascript'>

    $(document).ready(function(){

    $(".hi").live('change',function(){
    alert($(this+"option:selected").val());
    });


    });


    </script>

    </head>

    <body>

    <form>

    <select class='hi'>

    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>

    </select>



    <select class='hi'>

    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>

    </select>

    </form>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creating two objects with the same class value, does create a collection?

    For what you are trying to do, it will be better to get the objects by id property instead, setting them different values.


    See you

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    London, United Kingdom
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply, pablogo

    I was creating the drop downs dynamically, so i had to assign a dynamic name to each of them when i created them (but still retaining the bind handler to the classname for functionality), and then when i changed them, it would get the name attribute, then allowing me to access their option values independantly from each other.


    like this:

    $(".routingselectbox").live('change',function(){

    //get the select name attribute of select
    var getname = $(this).attr('name');

    //get the currently selected value of it
    var currentvalue = $("select[name='"+getname+"'] option:selected").val();

    alert(currentvalue);

    });

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Code JAVASCRIPT:
    <script type='text/javascript'>
     
    $(document).ready(function(){
     
    $(".hi").live('change',function(){
    alert(this+"option:selected");
    //alert($(this+"option:selected").val());
    });
     
     
    });
     
     
    </script>

    What does the alert say?
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    London, United Kingdom
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If i did it that way, the alert would just give me the selected option from the first dropdown. If i changed the second, it would still give me the selected value from the first.

    It appears that some html elements can get unique values when using classnames, and others can not so easily using jquery.

    However, i did figure it out, and it meant creating a dynamic name for each of the selects and using that to find the selected option (see my previous post).

    The wierd thing is, if i can use $(this).attr('name'); to get the unique name of the select i just changed, why can't i do the same for option:selected? different functionality for the selector syntax i guess.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the "option" isn't a node in pure sense, "options" are collection o objects that are included into "select" nodes.

    So, if you want the "text" for a specific "option" (the selected one) you should point to that "option" cause the "select" node do not has a "text" property, so does the "option"


    Some example

    Code JavaScript:
    //getting "text" from select node
     
    // o = instance of a Select node
     
    o.options[o.selectedIndex].text;

    That's means that you should access the option collection for the retriving the text actually being displayed on the select.


    See you

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    London, United Kingdom
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting. Thanks for the information.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •