Price calc

by raskalbass

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/3.0.1/normalize.css">
<div id="calc" class="well" style=" max-width: 600px; margin: 10px auto 10px;">
    <form role="form">
        <div class="form-group">
            <label for="brands">
                 <h3>Производитель:</h3>

            </label>
            <select id="brands" class="form-control input-lg">
                <option>Pongs</option>
                <option>Descor</option>
                <option>Polyplast</option>
                <option>MSD</option>
            </select>
        </div>
        <div class="form-group">
            <label for="">Наименование:</label>
            <select id="item_Pongs" class="form-control items">
                <option>Lackfolie лак(100 цветов)</option>
                <option>Lackfolie лак(26 цветов)</option>
                <option>Lackfolie лак (303, 307, 347, 501, 507, 511, 571)</option>
                <option>Mattfolie мат</option>
                <option>mattfolie мат (1303)</option>
                <option>Мат (1303, 1501, 1307, 1507, 1404, 1511, 1515)</option>
                <option>Мат (1303, 1501, 1507, 1511, 1604, 1110, 1406)</option>
                <option>Сатин (13 цветов)</option>
                <option>Сатин (303, 501, 507, 511, 604, 110, 406)</option>
                <option>Фактурные</option>
                <option>Metallic ( 35-901 , 35-903 )</option>
                <option>Metallic ( 35-943 )</option>
                <option>Metallic ( 35-347 )</option>
                <option>Metallfolie ( 35-906 )</option>
                <option>Metallfolie ( 35-907 )</option>
                <option>Metallfolie ( 35-905 , 35-184, 35-466 , 35-333 )</option>
                <option>Perlmutt ( 28-305 , 28-319 , 28-547 )</option>
                <option>Metallfolie ( 35-909, 35-913 )</option>
                <option>Wolkendruck 130 см (облака)</option>
...

CSS

#calc {
    padding: 5px;
}
body{background: #A9D2E4;}

JavaScript

function brandsel() {
    $(".items").hide();
    $("#brands").focus();
    $("#item_" + $("#brands").val() + "").show();
}
$("#brands").change(function () {
    brandsel();
});
$(function () {
    brandsel();
});