dynamic menu problem with onchange event

chobo

Hi, I am trying to make a dynamic menu using javascript and an xml file. The structure of the page (test.html) is in the code below. When I load up the page the drop-down list is there, so I select a value from the list and it passes that value to the function to get the appropriate data and it prints out the values (which it does just fine).

The thing is when I select an item from the drop-down list the other html disappears (even the doctype, and drop down list), and it just displays the values... This is all happening on the same page (test.html), so I'm not sure what is going on. Would using "document.write" in the script mess it up so it only display the output from the function? Any help is appreciated, thanks.

Expand|Select|Wrap|Line Numbers

 
<doctype etc...>

<html>

<head>

<script type="text/javascript">

function initMenu(value) {

.. code to parse xml file and print out values

}

</script>

</head>

<body>

<form name="myForm">

<select name="mySelect" onchange="initMenu(this.value)">

<option value="Item1">Item 1</option>

<option value="Item2">Item 2</option>

<option value="Item3">Item 3</option>

<option value="Item4">Item 4</option>

</select>

</form>

</body>

</html>

pbmods

Heya, chobo. Welcome to TSDN!

Quote:

Originally Posted by chobo

Would using "document.write" in the script mess it up so it only display the output from the function?

When you use document.write, the script has to open the document for writing. If it is still loading, this isn't a problem b/c the document is still open.

On the other hand, once the document finishes loading, it is 'closed', and the only way to open it is to erase it and start over.

This would be why you're only seeing the output of your function.

What you'll want to do instead is to dynamically create a new element and insert it into the body of your document, or else alter the innerHTML property of a container element.

chobo

Thanks for the help and information! I got it to work by cocantenating the output to a variable and using the innerHTML property.

dynamic menu problem with onchange event

re: dynamic menu problem with onchange event

re: dynamic menu problem with onchange event

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about