JQM Select List multiple selections and get values

Question

Hey guys i have some code here that i can't seem to get working properly or my logic doesn't make sense. I need to create a multiple select box that allows the user to select what toppings they would like for there pizza. In turn, each topping is an additional cost of .50 cents in my calculation. So if, the user just wants one topping it will only be an additional .50 cents. So if the user chooses options 2 or 3 or even 1 and 4 the outcome would be the same in price for toppings.

Any help would be appreciated!

Here is the NEW HTML:

<label for='top'>Toppings:</label>
                    <div class="ui-field-contain">
                            <select name="top" id="top" multiple="multiple" data-native-menu="false">
                                <option>Choose Toppings</option>
                                <option value="1">Sausage</option>
                                <option value="1">Pepperoni</option>
                                <option value="1">Mushroom</option>
                                <option value="1">Bell Pepper</option>
                                <option value="1">Onions</option>
                            </select>
                    </div>

JS:

var top = $("#top").val();      
var priceTop = '';

        if (top == 1)
        {
        priceTop = '.50';
        }
        else if (top == 2)
        {
        priceTop = '1.00';
        }
        else if (top == 3)
        {
        priceTop = '1.50';
        }
        else if (top == 4)
        {
        priceTop = '2.00';
        }
         else if (top == 5)
        {
        pricetop = '2.50';
        }

Originally this was my code for determining which toppings were selected but i found that if i were to leave the values at 1 on the HTML it would change my calculations. So now i have to through this out. Old HTML

<label for='top'>Toppings:</label>
                    <div class="ui-field-contain">
                            <select name="top" id="top" multiple="multiple" data-native-menu="false">
                                <option>Choose Toppings</option>
                                <option value="1">Sausage</option>
                                <option value="2">Pepperoni</option>
                                <option value="3">Mushroom</option>
                                <option value="4">Bell Pepper</option>
                                <option value="5">Onions</option>
                            </select>
                    </div>

Answer 1

Multiple-non-native select value .val() in jQuery Mobile returns an array. The .length of that array represents total chosen options. Multiple .length by 0.5 to get final value.

$(document).on("pagecreate", function () {
    $("#top").on("change", function () {
        if ($(this).val() != null) {
            console.log($(this).val().length * 0.5 + " USD");
        } else {
            console.log("No toppings.");
        }
    });
});

Demo