Question

我有一个完整的mysql填充的下拉列表，我也显示了mysql设置的价格，到目前为止我很高兴。

问题是什么，因为它是一个多下拉列表，它只显示首先选择的内容，如果我选择2个或更多选项，则只显示第一个价格。

我的第二个问题是我希望价格加起来，即1st Selection的价格是1.99英镑，2nd Selection的价格是2.99英镑所以总价格应该是£4.98

最后，一旦我完成了所有这些工作，我想继续这个到第2 /第3 /第4个下拉框，这样所有的盒子加起来给我一个合计的总数。

这是我的html代码，向您展示我正在使用的内容：

<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>

，这是我的js：

function changePrice() {
 var sex_price = $("option:selected").attr("sex_price");
 $("#price_div").html("Price = £" + sex_price);
}

由于

Answer 1

下面是您要尝试执行的操作的示例，我已经为每个select元素计算了total class以便它们不会混合与其他元素一起。

<强>的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>

当其中一个元素发生更改时，这将更新total的内容以及每个select元素与类calculate的总价。

Answer 2

选择多个也应该设置size属性，如下所示：

<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">
您的jQuery脚本：

$('select#Sexdiv').change(function() { 
    var value = 0;
    $("select#Sexdiv option:selected").each(function(){
        value += parseFloat($(this).val());
    });
    $("#price_div").html("Price = £" + value);
});

嗯？

根据下拉列表选择更新价格

2 个答案: