SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing multiple select boxes by changing one

    I have multiple drop-down select boxes all referred to by the names image[1], image[2], image[3] etc. They all have exactly the same options.

    I would like another drop-down select box at the top of the page that contains the same options as the other select boxes. When I change the top one, they all change to that value.

    Could anybody point me in the direction of how to accomplish this?

    Thanks.
    Chris

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a very basic example using the onchange event and setting the selectedIndex:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function updateAll(to) {
                    document.getElementById('select2').selectedIndex = to;
                    document.getElementById('select3').selectedIndex = to;
                    document.getElementById('select4').selectedIndex = to;
                }
            </script>
        </head>
        <body>
            
            <label>Select 1: </label>
            <select onchange="updateAll(this.selectedIndex);">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
            </select>
            <br />
            <label>Select 2: </label>
            <select id="select2">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
            </select>
            <br />
            <label>Select 3: </label>
            <select id="select3">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
            </select>
            <br />
            <label>Select 4: </label>
            <select id="select4">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
            </select>
    
        </body>
    </html>


  3. #3
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that example, it is mostly what I want but not quite.

    I didn't mention that the number of select boxes changes under different circumstances. Sometimes there are only 3 (image[1], image[2], image[3]) and other times there could be 5 (image[1], image[2], image[3], image[4], image[5]).

    I want to be able to change all of these no matter how many there are.

    Thanks for your help.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats not a problem, you are no doubt using a Server Side code to generate the drop down lists, if so, then you need to create them, assign an id, and also create the function to include those.

    The forum is a place to learn, i've given you the building blocks, the rest is upto you.



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
  •