Question

我有一个表单，我想向用户显示他们所选择的选项的总计。但是，我需要使用处理表单的PHP中的字段值（它发送一封电子邮件，其中包含用户从多个下拉菜单中选择的选项）。

因此，我想将数字总数放在'rel'属性中并将其相加。这是一个例子：

<option value="1x VIP Ticket" id="one" rel="160">1x VIP Ticket</option>

我之前使用了以下jquery代码来执行此操作，使用复选框，是否可以使其与选择菜单一起使用？我认为没有，看http://api.jquery.com/category/selectors/form-selectors/ ...所以也许用香草JS做这个呢？

$(document).ready(function() {
    function recalculate() {
        var sum = 0;

        $("input[type=checkbox]:checked").each(function() {
             sum += parseInt($(this).attr("rel"));
        });

        $("#output").html(sum);
    }

    $("input[type=checkbox]").change(function() {
        recalculate();
    });

});`

以下是使用数据属性的修订代码：

<script type="text/javascript"> <!--
$(document).ready(function() {
    function recalculate() {
        var sum = 0;

        $("#game1, #game2 option:selected").each(function() {
            sum += parseInt($(this).data("total"));
        });

        $("#output").html(sum);
    }

    $("#game1, #game2 option:selected").change(function() {
        recalculate();
    });

});

</script>

Tickets for Game 1
<select name="game1" id="game1">
<option value="1x VIP Ticket" id="1vip" data-total="160">1x VIP Ticket</option>
<option value="1x Regular Ticket" id="1regular" data-total="100">1x Regular Ticket</option>
</select>

Tickets for Game 2
<select name="game2" id="game2">
<option value="1x VIP Ticket" id="2vip" data-total="160">1x VIP Ticket</option>
<option value="1x Regular Ticket" id="2regular" data-total="100">1x Regular Ticket</option>
</select>


<div id="output"></div>

Answer 1

选项没有rel属性。请尝试使用data属性：

<option value="1x VIP Ticket" id="one" data-total="160">1x VIP Ticket</option>

...

sum += parseInt($(this).data("total"));

编辑：根据您的上次尝试，试试这个：

$(document).ready(function() {
    function recalculate() {
        var sum = 0;

        $("#game1, #game2").find("option:selected").each(function() {
            sum += parseInt($(this).data("total"));
        });

        $("#output").html(sum);
    }

    $("#game1, #game2").change(function() {
        recalculate();
    });

});

Answer 2

var selectedVal = $(this).find("option:selected").attr("rel");

获取选项rel属性值。

添加选择下拉列表的rel属性

2 个答案: