when change select option code example

Example 1: on select price change

<select class="form-control calculate" id="size" name="size">
    <option data-price="5.00" value="Small">Small</option>
    <option data-price="10.00" value="Medium">Medium</option>
    <option data-price="15.00" value="Large">Large</option>
</select>

<span id="item-price">00</span>

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
var basePrice = 0;

$(".calculate").change(function () {
    newPrice = basePrice;
    $(".calculate option:selected").each(function () {
        newPrice += parseFloat($(this).data('price'));
        console.log(typeof newPrice);
    });
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
});
</script>

Example 2: html select option change other select option

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
    <option value="item0">--Select an Item--</option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

<script>
$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "item0") {
            $("#size").html("<option value=''>--select one--</option>");
        }
    });
});
</script>