Question

我有一个div，根据选择的选项显示信息。基本上，页面上有几个设置为隐藏的div，当用户从下拉列表中选择不是保留文本的选项（如"please select..."或某些变体）时，价格区域会自动填入价格。选项的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/

关于如何监控初始框，了解价格并将其显示在另一个框上的任何想法？

Answer 1

正在使用 DEMO

试试这个

我还编辑了你的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 …</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 …</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);
        }
    });
});

希望这有帮助，谢谢

Answer 2

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

获得价值使用 document.getElementsByTagName（ '选择'）。innerHTML的

在div中进行计算和显示

元素unjidden上的jQuery，用文本填充div

2 个答案:

HTML

码