SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grabbing the value of an <option> attribute to send with an AJAX query

    Sorry if this sounds naive, but I am just learning javascript/jquery in order to make some AJAX calls.

    Suppose I have something like this:

    Code:
    <select id="series">
    <option value="1" onclick="[ajax function]">First</option>
    <option value="2" onclick="[ajax function]">Second</option>
    <option value="3" onclick="[ajax function]">Third</option>
    <option value="4" onclick="[ajax function]">Fourth</option>
    <option value="5" onclick="[ajax function]">Fifth</option>
    <option value="6" onclick="[ajax function]">Sixth</option>
    </select>
    and I want to send an ajax query when one of the options is selected and I want send the value of the "value" attribute along as a parameter for a server side php function. How do I create a jquery variable that is equal to that value?

    Does something like this work?

    Code:
    value = $('#series option').attr('value');
    How does it know which option tag to grab the value from? Does it automatically grab the one that is clicked on?

    I can't really indicate ahead of time which option to grab as I don't know which will be clicked.

    --Kenoli

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is wrong with this code:

    Code:
    <select id="series">
    <option value="1" >First</option>
    <option value="2" >Second</option>
    <option value="3" >Third</option>
    <option value="4" >Fourth</option>
    <option value="5" >Fifth</option>
    <option value="6" >Sixth</option>
    </select>
    
    <script>
    $('#series option').click(function() { 
    var value= $(this).attr('value');
    alert(value);
    })
    </script>
    My intention is that when an option is clicked, the value of the "value" attribute for the option value clicked will be assigned to the value variable and then sent to the user as an alert.

    Nothing happens.

    I have linked to jquery in the header and other jquery actions work on the page.

    --Kenoli

  3. #3
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am new to Jquery.
    var value= $('#series option:selected').attr('value');
    Code:
      
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery ve AJAX işlemleri</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    	
    
    $(document).ready(function(){
    $('#series').change(function() { 
    
    //var value= $('select option:selected').val();
    //var value= $('select option:selected').attr('value');
    var value= $('#series option:selected').attr('value');
    alert(value);
    })
    })
    
    /*
    alert($('select:eq('+$(this).index()+') option:selected').html());
    alert($('select:eq('+$(this).index()+') option:selected').text());
    alert( $($(this+ 'option:selected')[$(this).index()]).text() );
    */
    </script>
    </head>
    <body>
    
    
    
    <select id="series">
    <option value="1" >First</option>
    <option value="2" >Second</option>
    <option value="3" >Third</option>
    <option value="4" >Fourth</option>
    <option value="5" >Fifth</option>
    <option value="6" >Sixth</option>
    </select>
    http://www.eburhan.com/jquery-ve-ajax-islemleri/
    http://www.eburhan.com/wp-content/ekler/91/ornek_3B.php

    serialize()
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  4. #4
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code is working Firefox 4.0b9

    Code:
      
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery ve AJAX işlemleri</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
    $('#series option').click(function() { 
    var value= $(this).attr('value');
    alert(value);
    })
    })
    
    </script>
    </head>
    <body>
    
    <select id="series" multiple>
    <option value="1" >First</option>
    <option value="2" >Second</option>
    <option value="3" >Third</option>
    <option value="4" >Fourth</option>
    <option value="5" >Fifth</option>
    <option value="6" >Sixth</option>
    </select>
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried the script in your most recent post and it works, though, I am wondering why the "mulitple" is required. This causes problems with my form layout. Is there some way to get it to work without multiple so it presents as a pulldown menu???

    Ther earlier one works and presents as a pulldown menu.

    When I have some time later, I will have to take a look at it closely and understand how it works.

    Thanks,

    --Kenoli

  6. #6
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <select multiple="multiple">

    http://www.w3schools.com/tags/att_select_multiple.asp
    http://www.w3schools.com/tags/tryit....elect_multiple


    http://www.w3schools.com/tags/tag_select.asp

    multiple : Specifies that multiple options can be selected at once
    size : Defines the number of visible options in a drop-down list


    <select size="2">

    http://www.w3schools.com/tags/att_select_size.asp
    http://www.w3schools.com/tags/tryit....ml_select_size
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    muazzez --

    My question was not about the multiple attribute itself, but why the javascript only works when it is set.

    At any rate, thanks. The script works perfectly and makes sense. A good learning for me.

    --Kenoli


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
  •