1

我有一个由 mysql 填充的下拉列表，工作正常，我也让它显示 mysql 设置的价格，到目前为止我很高兴。

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

我的第二个问题是我希望价格加起来，即第一个选择的价格是 1.99 英镑，第二个选择的价格是 2.99 英镑，所以总价应该是 4.98 英镑

最后，一旦我完成了所有这些工作，我想将其继续到第二/第三/第四下拉框，以便所有框加起来给我一个总和。

这是我的 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);
}

谢谢

4

2 回答 2

0

下面是您尝试做的一个示例，我已经给出了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的总价格更新 的内容。selectcalculate

于 2012-05-15T11:10:58.150 回答
-1

  1. select with multiple 也应该设置 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">

  2. 你的 jQuery 脚本：

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

唔？

于 2012-05-15T11:10:29.113 回答