FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free 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
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>
Related topics
HTML Help
javascript function not being seen
Opera 9.0 Technology Preview 2
Java tutorials
$_Post Variable for Options from Select Types?
AJAX tutorial [2nd part now updated]
Something crazy about IE javascript wew...
How? : Javascript Select All [solved]
Ajax Alerts
Javascript and Dynamic Select Boxes
Javascript hiding form sections problem.
changing form entry values before submit
Draw a red line outside the bathroom, pain will go away
How to record your screen for free in Windows
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

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