Update Price based on dropdown list selection - php

Question

I have a dropdown list populated by mysql working perfectly, I also have it displaying the price set by mysql, so far i'm happy.
What the issue is as it's a multiple dropdown list, it will only display what is chosen first, if I pick 2 or more selections, only the first price is shown.
My second issue is I want the prices to add up i.e. 1st Selection's price is £1.99, 2nd Selection's price is £2.99 so the total should be £4.98
Finally once i have all this working, I want to continue this onto the 2nd / 3rd / 4th dropdown boxes so that all the boxes add up giving me a combined total.
Here's my html code to show you what i'm using:
<form method="post" action="" name="form1">
<?
include 'classes.php';
$query="SELECT * FROM Sex_Table";
$result=mysql_query($query);
?>
<select data-placeholder="Your Favorite Football Team" class="chzn-select" multiple tabindex="6" id="Sexdiv" name="Sexdiv" style="width: 300px;" onChange="getClothing(this.value),changePrice()">
<option>Select Colour Type</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['ID']?> sex_price="<?=$row['Price']?>"><?=$row['Sex_Name']?> (£<?=$row['Price']?>)</option>
<? } ?>
</select><br /><br />
<p id="Clothingdiv">
<select style="width: 300px;" name="Clothing" disabled='disabled'>
<option>Select Sex First</option>
</select>
</p><br />
<script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); </script>
</form>
and here's my js:
function changePrice() {
var sex_price = $("option:selected").attr("sex_price");
$("#price_div").html("Price = £" + sex_price);
}
Thanks

Answer 1

Below is an example of what you're trying to do, I've given each select element I want to calculate the total for a class so that they are not mixed up with other elements.
jQuery
<script>
$(document).ready(function() {
$('.calculate').change(function() {
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
$('#total').text('£' + total.toFixed(2));
});
});
</script>
HTML
<select class="calculate" name="select-1">
<option value="0">Please Select</option>
<option value="1.99">£1.99</option>
<option value="2.99">£2.99</option>
</select>
<select class="calculate" name="select-2">
<option value="0">Please Select</option>
<option value="1.99">£1.99</option>
<option value="2.99">£2.99</option>
</select>
<select class="calculate" name="select-3">
<option value="0">Please Select</option>
<option value="1.99">£1.99</option>
<option value="2.99">£2.99</option>
</select>
<span id="total">£0</span>
This will update the contents of total with the total price of each select element with class calculate when one of them is changed.

Answer 2

select with multiple should have the size attribute set as well, like this:
<select data-placeholder="Your Favorite Football Team" class="chzn-select" multiple="multiple" tabindex="6" id="Sexdiv" name="Sexdiv" style="width: 300px;" onChange="getClothing(this.value),changePrice()" size="10">
Your jQuery script:
$('select#Sexdiv').change(function() {
var value = 0;
$("select#Sexdiv option:selected").each(function(){
value += parseFloat($(this).val());
});
$("#price_div").html("Price = £" + value);
});
Hmm?