添加选择下拉菜单的 rel 属性

Question

I have a form where I'd like to show the user a running total of the options they've selected. However, I need to use the value of the field in the PHP that processes the form (it sends an e-mail with what options the user selected from multiple dropdown menus).

Therefore, I'd like to put the numeric total in the 'rel' attribute and sum that instead. Here's an example:

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

I have used the following jquery code before to do this with checkboxes, is it possible to make it work with select menus? I don't think there is, looking at http://api.jquery.com/category/selectors/form-selectors/ ...so perhaps a way to do this with vanilla 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();
    });

});`

Here's the revised code to the use the data attribute:

<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

Options don't have a rel attribute. Try using a data attribute instead:

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

...

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

EDIT: Based on your last attempt, try this:

$(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 属性值获取。