FRIHOSTFORUMSFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

FIXED: javascript action on select element

 


golles
hey guys, I have one selectbox (name=head)
and I have 3 other hidden select boxes

when I click an option of the first selectbox (head) I want one of the other 3 to be visible
so when the first option is selected the first hidden will be visible, if the seconds option is chosen the first will hide and the second will be visible, this is what I got so far, but it aint working...

Code:

<script type="text/javascript">
function laatjuistezien(deze){
   var myArray = new Array();
   myArray[0] = "obj1";
   myArray[1] = "obj2";
   myArray[2] = "obj3";
   
   for(i = 0; i < 3; i++){
   
      if(deze == i){
         //document.write(myArray[i] + " is the same<br>");
         document.getElementById(myArray[i]).style.display="inline";
      }else{   
         //document.write(myArray[i] + " is note the same<br>");
         document.getElementById(myArray[i]).style.display="none";
      }
      
   }
}
</script>

<form name="form">

    <select name="head" onchange="laatjuistezien(this.???)">
      <option name="obj1">test 1</option>
        <option name="obj2">test 2</option>
        <option name="obj3">test 3</option>
    </select>



   <select name="1" id="obj1" style="display: none;">
      <option name="1">1</option>
        <option name="1">1</option>
        <option name="1">1</option>
    </select>
   
   <select name="2" id="obj2" style="display: none;">
      <option name="2">2</option>
        <option name="2">2</option>
        <option name="2">2</option>
    </select>
       
   <select name="3" id="obj3" style="display: none;">
      <option name="3">3</option>
        <option name="3">3</option>
        <option name="3">3</option>
    </select>
   
</form>


hope someone can help me Embarassed


Last edited by golles on Fri Mar 28, 2008 11:21 am; edited 1 time in total
golles
I fixed it

Code:

<script type="text/javascript">
function laatjuistezien(deze){
var selectedItem=document.myform.head.selectedIndex;
   var myArray = new Array();
   myArray[0] = "obj1";
   myArray[1] = "obj2";
   myArray[2] = "obj3";

   for(i = 0; i < 3; i++){
   
      if(selectedItem == i){
         document.getElementById(myArray[i]).style.display="inline";
      }
      else{   
         document.getElementById(myArray[i]).style.display="none";
      }
      
   }
}
</script>

<form name="myform">

    <select name="head" onchange="laatjuistezien()">
      <option name="obj1">test 1</option>
        <option name="obj2">test 2</option>
        <option name="obj3">test 3</option>
    </select>



   <select name="1" id="obj1" style="display: none;">
      <option name="1">1</option>
        <option name="1">1</option>
        <option name="1">1</option>
    </select>
   
   <select name="2" id="obj2" style="display: none;">
      <option name="2">2</option>
        <option name="2">2</option>
        <option name="2">2</option>
    </select>
       
   <select name="3" id="obj3" style="display: none;">
      <option name="3">3</option>
        <option name="3">3</option>
        <option name="3">3</option>
    </select>
   
</form>
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.