PDA

Click to See Complete Forum and Search --> : Using Javascript to do a dynamic Menu

Ced20
04-26-2005, 10:42 AM
Hiya,
I'm currently doing a menu with 3 select populated by an array in javascript, the population works but, my prob is that after the first time you click on a option, the population does not work anymore, like he would not do the function a second time. here the code :
If someone have an idea it would be alot apreciate..


<form name="form1" method="post" action="">
<font color="#5A6D83" face="Arial, Helvetica, sans-serif"><strong>Choose a product type : </strong></font><br>
<select name="select" id="menu" onChange="afficheSousCat(this.value)">
<option value="null" selected>Choose a category</option>
<script>
for(i=1;i<=catArray.length-1; i++){
document.write('<option value='+catNodeArray[i]+'>' + catArray[i] + '</option>')
}
</script>
</select>
<br>
<br>
<span id="sub" style="display:block"><font color="#5A6D83" face="Arial, Helvetica, sans-serif"><strong>Choose a sub-product type : </strong></font></span>
<!-- Sous-catégorie vide -->
<select name="select" id="sub_vide" style="display:block">
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option></option>
<option></option>
</select>
<br>
<span id="sub" style="display:block"><font color="#5A6D83" face="Arial, Helvetica, sans-serif"><strong>Choose your product : </strong></font></span>
<!-- Sous-catégorie vide -->
<select name="select" id="sub_vide2" style="display:block">
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option></option>
<option></option>
</select>
<script>

function afficheSousCat(pNode){

document.write('<html><head><title>DemoPinacle</title></head><body>')
document.write('<style type="text/css">.Style2 {font-size: medium}body { font-size: 12}</style>')

// Indication de choisir un type de produit
document.write('<font color="#5A6D83" face="Arial, Helvetica, sans-serif"><strong>Choose a product type : </strong></font><br>')
// Liste déroulante - Principal
document.write('<select name="select" id="menu" onChange="afficheSousCat(this.value)">')
document.write('<option value="null" selected>Choose a category</option>')
for(i=0;i<= catArray.length-1; i++){
document.write('<option id='+catNodeArray[i]+' value='+catNodeArray[i]+'>' + catArray[i] + '</option>')
}
document.write('</select>')
// Sélection du bon choix
document.getElementById(pNode).selected = true;

// Indication de choisir un sous-produit"
document.write('<br><br><span id="sub1" style="display:block"><font color="#5A6D83" face="Arial, Helvetica, sans-serif"><strong>Choose a sub-product type : </strong></font></span> ')
// Liste déroulante - secondaire
document.write('<select name="select2" onChange="afficheSousCat(this.value)">')
document.write('<option value="null" selected>Choose a sub category</option>')
for (i=0;i<=eval("subcatArray"+pNode+"[i]").length;i++){
document.write('<option value='+eval("subcatNodeArray"+pNode+"[i]")+'>'+eval("subcatArray"+pNode+"[i]")+'</option>')
}
document.write('</select>')


// Indication de choisir un produit
document.write('<br><br><span id="subsub" style="display:block"><font color="#5A6D83" face="Arial, Helvetica, sans-serif"><strong>Choose your product : </strong></font></span>')
// Liste déroulante - terciaire
document.write('<select onChange="afficheSousCat(this.value)">')
document.write('<option value="null" selected>Choose a product</option>')
for (i=0;i<=eval("subsubcatArray"+pNode+"[i]").length;i++){
document.write('<option value='+eval("subsubcatNodeArray"+pNode+"[i]")+'>'+eval("subsubcatArray"+pNode+"[i]")+'</option>')
}
document.write('</select>')
document.write('</html>')
}

</script>
<br>
<br>
A1ien51
04-26-2005, 12:20 PM
You should not be using document.write, document.write replaces content if you call it after the age has loaded.

Instead you should loop at a script like this: http://www.javascriptkit.com/script/cut183.shtml which adds items to the select element.

Eric
Malkalypse
04-26-2005, 12:34 PM
I had the same problem when I had just started working with JavaScript (not all that long ago, actually :rolleyes: ). For a clearer understanding of what document.write actually does, use your browser to take a look at the page's source code after it has loaded.