1

mysql によって設定されたドロップダウン リストが完全に機能しており、mysql によって設定された価格も表示されています。これまでのところ満足しています。

複数のドロップダウン リストであるため、最初に選択されたもののみが表示されます。2 つ以上の選択肢を選択すると、最初の価格のみが表示されます。

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);
}

ありがとう

4

2 に答える 2

0

以下は、あなたがやろうとしていることの例です。他の要素と混同されないように、select計算したい各要素を与えました。totalclass

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 に答える