How to multiply values in two different select lists

How to multiply values in two different select lists

Hi guys, I have two different select lists, for selecting the number of riders in a bicycle race and the tour they're participating in.

When a selected field is updated, I want to display the total price.


HTML code

<select>
    <option selected="" value="">Select Riders</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<select>
    <option selected="" value="">Select a Tour</option>
    <option value="3900">3 Hour Tour</option>
    <option value="5900">Full Day Tour</option>
    <option value="11800">2 Day Tour</option>
</select>

jQuery

$(document).ready(function() {
    $("select").on("change", function() {
    var numRiders = +$("select:first option[selected]").attr("value");
    var tourCost = +$("select:last option[selected]").attr("value");
    $("#price").text(numRiders * tourCost);
    }
});

Why isn't this working?