SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Only allow 1 selection from multiple <select> boxes

    Hi.

    Im not at all sure how to go about even starting this.

    I want to be able to allow only 1 selection to be made from any of my 3 select boxes.

    What would be the easiest way to go about this


    Thanks
    Chris

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place this code anywhere below all the involved elements, substituting their IDs as shown.
    Code:
    <script type="text/javascript">
    
    function oneSelect()
    {
      var boxes = [], arg;
      
      for( var i = 0; ( arg=arguments[ i ] ); i++ )
      {
        boxes[ i ] = document.getElementById( arg );
        boxes[ i ].onchange = f;
      }
      
      function f()
      {      
        for( var i = 0, box; box = boxes[ i ]; i++ )
         if( this !== box )
           box.selectedIndex = 0; /* or -1 if no default option*/
      }  
    }
    
    
    oneSelect( 's1', 's2', 's3' ); /* IDs of involved select elements */
    
    
    </script>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having the same issue and I am trying to implement your JavaScript but it is not working properly I have your entire code on my webpage and have replaced the 0 with -1 because I have no default option, I also renamed the oneSelect( 's1', 's2', 's3' ); to the appropriate select ids. Any idea why this wouldn't work? Here is snippets of the HTML in which implement the JavaScript


    <script type="text/javascript">

    function oneSelect()
    {
    var boxes = [], arg;

    for( var i = 0; ( arg=arguments[ i ] ); i++ )
    {
    boxes[ i ] = document.getElementById( arg );
    boxes[ i ].onchange = f;
    }

    function f()
    {
    for( var i = 0, box; box = boxes[ i ]; i++ )
    if( this !== box )
    box.selectedIndex = -1; /* or -1 if no default option*/
    }
    }
    oneSelect('term0sub0Select' , 'term0sub1Select' , 'term1sub0Select' , 'term1sub1Select');
    </script>


    <select name="course" class="image-frame" id="term0sub0Select" size="5" style="width:200px">
    <option value="1">Freshman Writing</option>
    </select>
    <select name="course" class="image-frame" id="term0sub1Select" size="5" style="width:200px">
    <option value="1">Calculus 1</option>
    <option value="5">College Algebra</option>
    </select>
    <select name="course" class="image-frame" id="term1sub0Select" size="5" style="width:200px">
    <option value="1">Shakespeare</option>
    </select>
    <select name="course" class="image-frame" id="term1sub1Select" size="5" style="width:200px">
    <option value="1">Calculus 2</option>
    <option value="5">Calculus 2</option>
    </select>


  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Deadeye,

    Welcome to the forums

    Re your problem: as Ali says, place the code anywhere below all the involved elements.
    As it is, your script is trying to reference elements which don't exist in the DOM.
    Swap the script and the HTML around and all will be well.


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
  •