There are 2 html files, file-1.htm and file-2.htm. There is another html file, test.htm, with a drop-down having 2 values, "Load Sample-1" and "Load Sample-2".
This is what I am trying: When "Load Sample-1" is selected from the drop-down, file-1.htm should be loaded as a nested html in test.htm.
Right now I am able to achieve this through javascript by having the content of file-1.htm and file-2.htm inside test.htm. Bt as the drop-down grows bigger, test.htm would bee huge. How can this be achieved by having separate html files for each entry in the drop-down?
There are 2 html files, file-1.htm and file-2.htm. There is another html file, test.htm, with a drop-down having 2 values, "Load Sample-1" and "Load Sample-2".
This is what I am trying: When "Load Sample-1" is selected from the drop-down, file-1.htm should be loaded as a nested html in test.htm.
Right now I am able to achieve this through javascript by having the content of file-1.htm and file-2.htm inside test.htm. Bt as the drop-down grows bigger, test.htm would bee huge. How can this be achieved by having separate html files for each entry in the drop-down?
Share Improve this question asked May 22, 2009 at 20:06 user32262user32262 8,85023 gold badges66 silver badges78 bronze badges4 Answers
Reset to default 8Why don't you just use an <iframe>, and then have the JavaScript dynamically change the source of the iframe?
Here's a bare-bones page demonstrating how to use this:
<html>
<head>
<script type="text/javascript">
var changePage = function() {
var iframe = document.getElementById("myiframe"); // One of the many ways to select your iframe
var select = document.getElementById("pageselected");
var url = select.options[select.selectedIndex].value;
iframe.src = url;
}
</script>
</head>
<body>
<select id="pageselected">
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</select>
<input type="button" onclick="changePage()" value="Change Page" />
<iframe id="myiframe"></iframe>
</body>
</html>
You may be asking yourself "why did he not just use onchange for the <select>? Well, I've got a little war going with <select> + onchange that I detail here, but basically using it makes your website pletely inaccessible to keyboard-only users who are using Internet Explorer 6 or 7. (Not sure if it is still broken in 8.)
If you use JQuery they have a fancy function jquery('#div').load() http://jquery./ http://docs.jquery./Ajax/load
Works great and also supports GET and POST parameters.
If the drop down is "huge" then I would suggest no longer using a drop down and looking into some of the existing autopletion boxes out there for your language of choice.
If there are hundreds and hundreds of options a dropdown is no longer an appropriate form element.
You can use AJAX to acplish this. There's a million different AJAX tutorials out there that can introduce you to the technique.