SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Coordinating two javascript select boxes

    Is there a simple, inline, method to coordinate two select boxes in a form that's cross browser compatible (for the majors).

    I have a form that looks like this:

    From | To
    ==============
    1st Q | 1st Q
    2nd Q | 2nd Q
    Jan | Jan
    Feb | Feb
    .....

    I want to let them select the months independently. But if they choose 1st Q or 2nd Q in EITHER the From or To select box, I'd like it to automatically do the same in the other select.

    Do I need a complicated .js script, or can I handle this inline with a few commands?

  2. #2
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <select id="one" onchange="if(this.selectedIndex <= 1){document.getElementById('two').selectedIndex = this.selectedIndex;}">
    	<option value="1">1-One</option>
    	<option value="2">2-Two</option>
    	<option value="jan">Jan</option>
    	<option value="feb">Feb</option>
    	<option value="mar">Mar</option>
    </select>
    <select id="two" onchange="if(this.selectedIndex <=1 ){document.getElementById('one').selectedIndex = this.selectedIndex;}">
    	<option value="1">1-One</option>
    	<option value="2">2-Two</option>
    	<option value="jan">Jan</option>
    	<option value="feb">Feb</option>
    	<option value="mar">Mar</option>
    </select>

  3. #3
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joebert
    Code:
    <select id="one" onchange="if(this.selectedIndex <= 1){document.getElementById('two').selectedIndex = this.selectedIndex;}">
     	<option value="1">1-One</option>
     	<option value="2">2-Two</option>
     	<option value="jan">Jan</option>
     	<option value="feb">Feb</option>
     	<option value="mar">Mar</option>
     </select>
     <select id="two" onchange="if(this.selectedIndex <=1 ){document.getElementById('one').selectedIndex = this.selectedIndex;}">
     	<option value="1">1-One</option>
     	<option value="2">2-Two</option>
     	<option value="jan">Jan</option>
     	<option value="feb">Feb</option>
     	<option value="mar">Mar</option>
     </select>
    Thank you!

    I'm assuming I can change
    if(this.selectedIndex <=1 )
    to be more specific
    if(this.selectedIndex ='1stQ' )
    ?

    Because I did, and it seemed to work, but one catch. As soon as you select1stQ, it won't let the box move!! Because it's a catch 22, it always says the other is 1stQ and won't move!

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a couple things wrong with your modification
    if(this.selectedIndex ='1stQ' )

    selectedIndex is the index position of the selected option, starting at 0, so you can't reference string values against selectedIndex.

    The second problem with your statement is you're using an assignment operator = instead of a comparison operator ==

    My advice to you is to just use joebert's code as is, but simply change the values/text of the options. The selectedIndex will always be a number no matter what you change the option values to.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the detailed explanation. I got it to work now.


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
  •