Add rel attribute of select dropdown
<p>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). </p>

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

<pre><code>&lt;option value="1x VIP Ticket" id="one" rel="160"&gt;1x VIP Ticket&lt;/option&gt;
</code></pre>

<p>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 <a href="http://api.jquery.com/category/selectors/form-selectors/" rel="nofollow">http://api.jquery.com/category/selectors/form-selectors/</a> ...so perhaps a way to do this with vanilla JS?</p>

<pre><code>$(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();
    });

});`
</code></pre>

<p>Here's the revised code to the use the data attribute:</p>

<pre><code>&lt;script type="text/javascript"&gt; &lt;!--
$(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();
    });

});

&lt;/script&gt;

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

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


&lt;div id="output"&gt;&lt;/div&gt;
</code></pre>
