Dynamically Populating a Select Box Using a Hidden Iframe
Let’s say you have two select boxes, Country and City. The contents of City should reflect that of the selected country. A hidden iframe may be used to do this without having to reload the page.
The concept is to use the onchange event of Country to specify the src of the hidden iframe. Server-side code then loads the hidden iframe with Javascript that populates the City select box of its parent.
The Javascript to populate a select box in a parent is as follows:
<script type="text/javascript">
<!–
var s = window.parent.document.getElementById(”selCity”);
s.options.length = 0;
s.options[0] = new Option(”Los Angeles”, “LA”);
s.options[1] = new Option(”New York”, “NY”);
s.options[2] = new Option(”Washington, D.C.”, “DC”);
//–>
</script>
To render a hidden iframe, set frameborder="0" and style="height: 0; width: 0".
Comments: