Only allow 1 selection from multiple <select> boxes

JavaScript
1

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

Place this code anywhere below all the involved elements, substituting their IDs as shown.

<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' ); [B]/* IDs of involved select elements */[/B]


</script>
3

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

[FONT=Courier New]<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>

      &lt;select name="course" class="image-frame" id="term0sub0Select" size="5" style="width:200px"&gt;
          &lt;option value="1"&gt;Freshman Writing&lt;/option&gt;
      &lt;/select&gt;
      &lt;select name="course" class="image-frame" id="term0sub1Select" size="5" style="width:200px"&gt;
          &lt;option value="1"&gt;Calculus 1&lt;/option&gt;
          &lt;option value="5"&gt;College Algebra&lt;/option&gt;
      &lt;/select&gt;
      &lt;select name="course" class="image-frame" id="term1sub0Select" size="5" style="width:200px"&gt;
          &lt;option value="1"&gt;Shakespeare&lt;/option&gt;
      &lt;/select&gt;
      &lt;select name="course" class="image-frame" id="term1sub1Select" size="5" style="width:200px"&gt;
          &lt;option value="1"&gt;Calculus 2&lt;/option&gt;
          &lt;option value="5"&gt;Calculus 2&lt;/option&gt;
      &lt;/select&gt;[/FONT]
4

Hi Deadeye,

Welcome to the forums :slight_smile:

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.