Link dropdown menus populated by mysql php - php

Question

Excuse me if i've got the terms wrong as i'm new to development, but I have a multiple dropdown menu's linked so that the results from the the previous menu determine what the next menu will populate the next.
i.e. if i select uk, the next list will show, London, If i select Spain, the next list will show Madrid
My dropdown menus are getting populated by mysql, this is fine but how do i link them up without calling on another page
Here's an example of what HTML i have:
<div id="container">
<h3>Price List</h3>
<form method="post" action="" name="form1">
<?
include 'classes.php';
$query="SELECT * FROM Sex_Table";
$result=mysql_query($query);
?>
<div id="select-1">
<select class="calculate" name="sdf" onChange="getClothing(this.value)">
<option value="0">Please Select</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['Price']?> sex_price="<?=$row['Price']?>"><?=$row['Sex_Name']?> (£<?=$row['Price']?>)</option>
<? } ?>
</select>
</div>
<?
$Sex=intval($_GET['Sex_var']);
include 'classes.php';
$query="SELECT * FROM Clothing_Table WHERE Sex_Table_ID='$Sex'";
$result=mysql_query($query);
?>
<div id="select-2">
<select class="calculate" name="sdf" onChange="">
<option value="0">Please Select</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['Price']?> sex_price="<?=$row['Price']?>"><?=$row['Clothing_Name']?> (£<?=$row['Price']?>)</option>
<? } ?>
</select>
</div>
</form>
You'll notice that on change calls on "getClothing(this.value)"
Here is that js:
function getClothing(Sex_Table_ID) {
$.ajax({
type: "get",
url: "findClothing.php",
data: { Sex_var: Sex_Table_ID },
error: function(error) { alert('System error, please try again.'); },
success: function(data){ //data is the response from the called file
$("#select-2").html(data); //this changes the contents of the div to data that was returned
}
});
}
I need it so that it doesn't call on url: "findClothing.php", as once it does this, my price no longer calculates.
I'm sure i don't really need to show this part but just incase, here's what calculates my price:
$(function(){
$('.calculate').change(function() {
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
$('#total').text('£' + total.toFixed(2));
});
});//]]>

Answer 1

Are you sure your ajax data contains option tag with price as a value?
Also change:
$('.calculate').change(function() {
with
$(".calculate").live("change", function(){