Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 183
  • Last Modified:

2 columns of 7 select boxes

table made up of 2 columns and 7 rows.

each cell has a selectbox:

SelectBoxA0 | SelectBoxB0 <--- Master SelectBoxes
SelectBoxA1 | SelectBoxB1 <--- Slave SelectBoxes
SelectBoxA2 | SelectBoxB2 <-----------|                
SelectBoxA3 | SelectBoxB3 <-----------|
SelectBoxA4 | SelectBoxB4 <-----------|
SelectBoxA5 | SelectBoxB5 <-----------|
SelectBoxA6 | SelectBoxB6 <-----------|
SelectBoxA7 | SelectBoxB7 <-----------|

what im trying to do, is if a user selects an option in either of the Master SelectBoxes, all the Slave SelectBoxes belong to that Master has there selectedIndex set the same as its Masters.

Example:  I selected option 1, red in Master SelectBoxA0.  When i do this, i want the selectedIndexes in the Slave SelectBoxes1..7 to be set to red.  If i select green, all the slaves will get set to green

Same goes for Master SelectBoxB0...

Code:

<tr>
      <td><select id="MasterSelectA0" onchange="updateAllSlaveADropDowns( this.selectedIndex )">
            <option>red</option>
            <option>green</option>
            <option>yellow</option></select>
      </td>
      <td><select id="MasterSelectB0" onchange="updateAllSlaveBDropDowns( this.selectedIndex )">
            <option>apples</option>
            <option>oranges</option>
            <option>grapes</option></select>
      </td>
</tr>
<script type="text/javascript">
<!--
var table = '';

for (j = 1; j < 7; j++)
{
      table += '<tr>';
      table += '<td><select id="MasterSelectA0' + j+1 + '"><option>red</option><option>green</option><option>yellow</option></select></td>';
      table += '<td><select id="MasterSelectB0' + j+1 + '"><option>apples</option><option>oranges</option><option>grapes</option></select></td>';
      table += '</tr>';
}

document.write(table);

//-->
</script>



Javascript:

      function updateAllSlaveADropDowns( selected ) {
            var myform = document.forms[ 'myform' ] ;

            for ( var i = 0; i < myform.MasterSelectA0.length; i++ ) {
                  if ( myform.MasterSelectA0[ i ].selectedIndex != null ) {
                        myform.MasterSelectA0[ i ].selectedIndex = selected ;
                  }
            }
      }

      function updateAllSlaveBDropDowns( selected ) {
            var myform = document.forms[ 'myform' ] ;

            for ( var i = 0; i < myform.MasterSelectB0.length; i++ ) {
                  if ( myform.MasterSelectB0[ i ].selectedIndex != null ) {
                        myform.MasterSelectB0[ i ].selectedIndex = selected ;
                  }
            }
      }


But it dont work? and i see find the bug
0
ellandrd
Asked:
ellandrd
  • 3
  • 2
1 Solution
 
TimYatesCommented:
<HTML>
  <HEAD>
  <script type="text/javascript">

     function updateAllSlaveADropDowns( selected ) {
          var i = 1 ;
          while( true )
          {
            var aSel = document.getElementById( 'MasterSelectA' + i ) ;
            if( aSel )
              aSel.selectedIndex = selected ;
            else
              break ;
            i++ ;
          }
     }

     function updateAllSlaveBDropDowns( selected ) {
          var i = 1 ;
          while( true )
          {
            var aSel = document.getElementById( 'MasterSelectB' + i ) ;
            if( aSel )
              aSel.selectedIndex = selected ;
            else
              break ;
            i++ ;
          }
     }

  </script>
  </HEAD>
  <BODY onload="window.location.hash='bookmark'">
<table>
<tr>
     <td><select id="MasterSelectA0" onchange="updateAllSlaveADropDowns( this.selectedIndex )">
          <option>red</option>
          <option>green</option>
          <option>yellow</option></select>
     </td>
     <td><select id="MasterSelectB0" onchange="updateAllSlaveBDropDowns( this.selectedIndex )">
          <option>apples</option>
          <option>oranges</option>
          <option>grapes</option></select>
     </td>
</tr>
<script type="text/javascript">
<!--
var table = '';

for (j = 1; j < 7; j++)
{
     table += '<tr>';
     table += '<td><select id="MasterSelectA' + j + '"><option>red</option><option>green</option><option>yellow</option></select></td>';
     table += '<td><select id="MasterSelectB' + j +

'"><option>apples</option><option>oranges</option><option>grapes</option></select></td>';
     table += '</tr>';
}

document.write(table);

//-->
</script>
</table>
  </BODY>
</HTML>

Like that?
0
 
TimYatesCommented:
Basically, I changed your 2 methods to:

     function updateAllSlaveADropDowns( selected ) {
          var i = 1 ;
          while( true )
          {
            var aSel = document.getElementById( 'MasterSelectA' + i ) ;
            if( aSel )
              aSel.selectedIndex = selected ;
            else
              break ;
            i++ ;
          }
     }

     function updateAllSlaveBDropDowns( selected ) {
          var i = 1 ;
          while( true )
          {
            var aSel = document.getElementById( 'MasterSelectB' + i ) ;
            if( aSel )
              aSel.selectedIndex = selected ;
            else
              break ;
            i++ ;
          }
     }

And your generation loop to:

for (j = 1; j < 7; j++)
{
     table += '<tr>';
     table += '<td><select id="MasterSelectA' + j + '"><option>red</option><option>green</option><option>yellow</option></select></td>';
     table += '<td><select id="MasterSelectB' + j + '"><option>apples</option><option>oranges</option><option>grapes</option></select></td>';
     table += '</tr>';
}

Hope you see why it works now :-)

Tim
0
 
ellandrdAuthor Commented:
Kinda

Bit confused with your :

var i = 1 ;
          while( true )
          {
            var aSel = document.getElementById( 'MasterSelectB' + i ) ;
            if( aSel )
              aSel.selectedIndex = selected ;
            else
              break ;
            i++ ;
          }

as im used to doing it the long way...

but thank you!
0
 
ellandrdAuthor Commented:
having a problem resetting the select boxes on load...

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21806583.html
0
 
TimYatesCommented:
>> Bit confused with your :

Ok.  I'll try to explain :-)

1) i starts at 1
2) start loop forever
3) get the element with the id "MasterSelectB" + i (ie: MasterSelectB1, MasterSelectB2, etc)
4) if the element with theat id exists, then set the select edindex of it to the value of "selected"
5) else if it doesn't exist, break out of the loop (goto 8)
6) increment i by one ( i = i + 1 )
7) loop round again (goto 3)
8) loop has finished (break), so end function :-)

Tim
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now