SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Ajax Query

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Darlington, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax Query

    I have a form with multiple drop down select boxes. There could be just one select list, there could be ten, it will be an undetermined number but they will all be uniquely named so select1, select2 etc.

    Now I need a JavaScript function that grabs the values of all the select boxes and arranges then in a list so 2,3,4 etc.

    The JavaScript function is part of a Ajax component that then runs a query dependent on the list.

    The Ajax function is fired whenever any one of the select boxes is changed.

    I've scoured around trying to find an example but they all seem to be a for a known number of list boxes not undetermined numbers. Any ideas?
    Cheers,
    Phil


  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, you want to list out the values of each select menu?

    Code JavaScript:
    $('#myForm select').each(function(i){
        $('#myForm').append($(this).val());
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Darlington, UK
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes but I need to use JavaScript to list out the values
    Cheers,
    Phil


  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you need to list out each option's value of select menu then this should do the trick:

    Code JavaScript:
    $('<ol id="select-menus"></ol>').appendTo('body');
    $('#myForm select').each(function(){
        var $select = $(this);
        $('#select-menus').append('<li>' + $(this).attr('name') + (function(){
                var list = '';
                $('option',$select).each(function(){
                    list+= '<li>' + $(this).attr('value') + '</li>';
                });
                return '<ol>' + list + '</ol>';
        })() + '</li>');
    });

    The above would work nicely with something like this:
    Code html4strict:
    <form id="myForm">
        <select name="menu1" id="menu1">
            <option value="value1">option1</option>
            <option value="value2">option2</option>
            <option value="value3">option3</option>
            <option value="value4">option4</option>
            <option value="value5">option5</option>
        </select>
        <select name="menu2" id="menu2">
            <option value="value1">option1</option>
            <option value="value2">option2</option>
            <option value="value3">option3</option>
            <option value="value4">option4</option>
            <option value="value5">option5</option>
        </select>
    </form>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •