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']?>&nbsp;(£<?=$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.