0

我有一个 div，它根据选择的选项显示信息。基本上，页面上有一些设置为隐藏的 div，当用户从下拉列表中选择不是保留文本（如"please select..."或某些变体）的选项时，价格 div 会用价格填充自己。选项的 ID 和类可以更改，并且无法事先确定它们（动态填充）。

当第一个价格 div 变得可见时，我希望在页面上填充另一个 div，从中提取金额，对其执行一些计算并显示它。

我正在考虑类似这样的事情：

jQuery( "form.variations_form cart" ).children("div.single_variation").change(
   function(){ 
        /* update the div */
   }
);

我已经把所有东西都放在了 jsfiddle 上，所以你可以看到它，但请注意评论。这是 jsfiddle 的链接：http: //jsfiddle.net/Scott_McGready/h3G6A/1/

关于如何监控最初的盒子，拉出价格并将其显示在另一个盒子上的任何想法？

4

2 回答 2

1

工作演示

尝试这个

我还编辑了你的 html

html

<fieldset class="variations">
    <div> <span class="select_label">Colour</span>

        <select id="colour-33" name="tax_colour-33">
            <option value="">Choose an option …&lt;/option>
            <option value="100">White/High Gloss Black</option>
        </select>
    </div>
    <div>   <span class="select_label">Installation</span>

        <select id="installation-61" name="tax_installation-61">
            <option value="">Choose an option …&lt;/option>
            <option value="200">Delivery only</option>
            <option value="300">Installation required</option>
        </select>
    </div>
</fieldset>
<!-- Initial state of single_variation is as follows. This changes as options are chosen and works well. <div class="single_variation" style="display: none;"></div>
-->
<!-- this version of single_variation only displays if all options are chosen -->
<div class="single_variation" style="display: block;"><span>£</span><span class="price">579.00</span>

    <p class="stock ">In Stock</p>
</div>
<div class="boxthis" style="width: 100%; border: 1px solid black;"> <span id="disctext">
    <p>You need to choose some options first so that we can calculate your price.</p>
    </span>

</div>

代码

$(document).ready(function () {
    var price = parseFloat($(".price").text())
    var val1;
    var val2;
    $("#colour-33").change(function () {
        if (parseFloat($("#colour-33 option:selected").val())) {
            val1 = parseFloat($("#colour-33 option:selected").val());
            price = price + val1;
            $(".price").text(price);
        } else {
            price = price - val1;
            $(".price").text(price);
        }
    });

    $("#installation-61").change(function () {
        if (parseFloat($("#installation-61 option:selected").val())) {
            val2 = parseFloat($("#installation-61 option:selected").val());
            price = price + val2;
            $(".price").text(price);
        } else {
            price = price - val2;
            $(".price").text(price);
        }
    });
});

希望这有帮助，谢谢

于 2013-09-03T19:02:21.343 回答
0

您可以使用 if 语句来检查第一个 div 是否可见。

获取价值使用 document.getElementsByTagName('select').innerHTML

进行计算并在 div 中显示

于 2013-09-03T18:01:34.913 回答