select onchange

Status
Niet open voor verdere reacties.
G

golles

Gebruiker
Lid geworden
27 mrt 2008
Berichten
8
OPGELOST: select onchange

Ik wil door middel van een functie ervoor zorgen dat de juiste id's wel/niet zichtbaar zijn. ik ben het eerst nog aan het testen door de functie rechtstreeks aan te roepen, maar krijg het niet voor elkaar.

iemand een idee?

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

<form>

    <select name="hoofd" onchange="">
		<option name="1">1</option>
        <option name="2">2</option>
        <option name="3">3</option>
    </select>
    
    <br><br>
	<select name="1" id="1" style="display: none;">
		<option name="1">1</option>
        <option name="1">1</option>
        <option name="1">1</option>
    </select>
    
	<select name="2" id="2" style="display: none;">
		<option name="2">2</option>
        <option name="2">2</option>
        <option name="2">2</option>
    </select>
        
	<select name="3" id="3" style="display: none;">
		<option name="3">3</option>
        <option name="3">3</option>
        <option name="3">3</option>
    </select>
    
</form>
 
Laatst bewerkt:
Ik heb heel wat moeten verbouwen om een werkend iets te krijgen.
Ik hoop dat je er nog wat aan hebt.

HTML: 
<html>
<head>
<script type="text/javascript">
function laatjuistezien(deze){
  var myArray = new Array();
  myArray[0] = "1";
  myArray[1] = "2";
  myArray[2] = "3";
  
  for(i = 0; i < 3; i++){
  
    if(deze == i+1){
      document.getElementById(myArray[i]).style.display="inline";
    }else{  
      document.getElementById(myArray[i]).style.display="none";
    }
    
  }
}

</script>
</head>
<body onload="laatjuistezien(1);">
<form>

    <input type="radio" name="hoofd" value="1" onclick="laatjuistezien(1);">
    <input type="radio" name="hoofd" value="2" onclick="laatjuistezien(2);">
    <input type="radio" name="hoofd" value="3" onclick="laatjuistezien(3);">
    
    <br><br>
  <select name="een" id="1">
    <option name="een">1</option>
        <option name="een">1</option>
        <option name="een">1</option>
    </select>
    
  <select name="twee" id="2">
    <option name="twee">2</option>
        <option name="twee">2</option>
        <option name="twee">2</option>
    </select>
        
  <select name="drie" id="3">
    <option name="drie">3</option>
        <option name="drie">3</option>
        <option name="drie">3</option>
    </select>
    
</form>
</body>
</html>
 
Bedankt voor de moeite, maar volgens mij heb je het niet helemaal begrepen (of ik heb het verkeerd uitgelegd maar goed)

wat het moet worden:
1 select element die zichtbaar is (hoofd)
daaronder staan de andere select elementen (hidden)
als er een optie gekozen worden in het select element hoofd word de bijbehoorden hidden selectbox zichtbaar (display: inline;)

Misschien dat je me hiermee kan helpen, of iemand anders?
 
Dus er moet er in het begin geen zichtbaar zijn?

Verander dan <body onload="laatjuistezien(1);">
in
<body onload="laatjuistezien(0);">

Of moet het eerste gedeelte, waarmee je de selectboxes kiest, ook persé een drop down box zijn?
 
Pieter Arntz zei:
Dus er moet er in het begin geen zichtbaar zijn?

Verander dan <body onload="laatjuistezien(1);">
in
<body onload="laatjuistezien(0);">

Of moet het eerste gedeelte, waarmee je de selectboxes kiest, ook persé een drop down box zijn?
Klik om te vergroten...

er hoeft helemaal niks te gebeuren in de body onload, er moeten inderdaard selectboxes zichtbaar worden door de 1e selectbox (dropdown box)
en ik zie geen andere manier dan javascript, want ik kan met php niet de pagina veranderen zonder hem te verversen, en javascript lijkt me gewoon de makkelijkste en effectiefste manier, en daar heb ik geen verstand van.

het scriptje moet dus gewoon 1 select element van display none veranderen naar display inline
 
Het probleem voor mij was dat ik het op geen enkele manier werkend kreeg vanuit een selectbox.
Als niemand anders iets weet, zal ik het in het weekend nog eens proberen.
 
ik heb het zelf al ondekt

HTML: 
<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>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan