Loading html file into div after selecting option on combobo

Loading html file into div after selecting option on combobo

Hi there.
First of all, i'm glad to be part of this forum. Hope to learn to many things in here.
And, by the way, congrats for becoming the official jQuery forum.

No, let's go the problems

I have an index.html, with two chained boxs.
The first one have some data, and the second one load data before choosing the first option (the second one is dependent from the first).

What i need is that, using javascript and ajax, load some html in a div.

the code look like this now:
[code]
<!DOCTYPE html>
<html>
<head>
<title>Song DNA</title>
<link rel="stylesheet" type="text/css" href="css/songdna.css">

<script type="text/javascript" src="script/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="script/Tooltip.js"></script>

<script type="text/javascript">if(parent.emulator)parent.emulator.begin(window);</script>

<script type="text/javascript">

songDNA.init();

$(document).ready(function(){

/* No progressbar yet */
$("#progressBarId").hide();

/* Set focus on artist field, but wait a little bit for things to get "settled" */
setTimeout(function () { $("#artist").focus() }, 50);

/* Setup enter-key as search button */
$("input").keyup(function(e) {
if(e.keyCode == 13) {
$("#searchButton").click();
}
});

/* Only now show buttons and input. Otherwise on handheld/phone they are shown first before background loads */
$("#searchButton").show();
$("#artist").show();
$("#song").show();

});

</script>
</head>
<body>
<div id="container">
<div id="header">

<div id="logofarmacia"></div>

<div id="titleButtons">
<button id="titleButtonsMinimise" type="button"><span></span></button>
<button id="titleButtonsClose" type="button"><span></span></button>
</div>

<h1>Farmácias <span id="version">v1</span></h1>
</div>
<div id="content">
<div id="front" class="view">
<h2 id="introText"><center>Escreva o nome do Concelho em que se encontra. À medida que escrever, surgirão as opções disponíveis. Quando terminar a selecção, prima o botão <br><b>Carregar dados!</center></b></h2>


<form name="doublecombo">
<p><select id="box1" name="example" style="width:150" size="1" onChange="redirect(this.options.selectedIndex)" select style="text-align:center;" >
<option>Seleccione um Distrito</option>
<option>A&ccedil;ores</option>
<option>Aveiro</option>

</select>
<br/>
<select id="box2" name="stage2" style="width:150" size="1" select style="text-align:center;" onchange="showCustomer(this.value)">
<option value="http://www.cmscardoso.net/widgets/amares.html"></option>
</select>
<br/>
<input type="button" name="test" value="Transferir dados!" onClick="showCustomer(this.value)">
</p>

<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[1][0]=new Option("Angra do Heroísmo","http://www.cmscardoso.net/widgets/farmacias/angra_do_heroismo.html")
group[1][1]=new Option("Calheta","http://www.cmscardoso.net/widgets/farmacias/calheta.html")
group[1][2]=new Option("Horta","http://www.cmscardoso.net/widgets/farmacias/horta.html")
group[1][3]=new Option("Lagoa","http://www.cmscardoso.net/widgets/farmacias/lagoa.html")

group[2][0]=new Option("Ã