3 selectbox on change together

3 selectbox on change together

by Thulasi Ram.S

HTML

<div id="fuel" class="controller">
        <span class="controllerLabel">fuel:</span>
        <select>
            <option value="all">all</option>
            <option value="petrol">petrol</option>
            <option value="diesel">diesel</option>
        </select>
    </div>
    <div id="drive" class="controller">
        <span class="controllerLabel">drive:</span>
        <select>
            <option value="all">all</option>
            <option value="auto">auto</option>
            <option value="manual">manual</option>
        </select>
    </div>
    <div id="type" class="controller">
        <span class="controllerLabel">type:</span>
        <select>
            <option value="all">all</option>
            <option value="car">car</option>
            <option value="4">4x4</option>
            <option value="7">peoeple</option>
            <option value="vanl">van</option>
        </select>
    </div>
    <div class="modelContainer  petrolmanualcar">
        <!-- <a id="" href="panda.html" title="Panda 1.2" accesskey="1"></a> -->
        <p>
            <img align="right" alt="Panda 1.2" id="image47" title="Clio 1.2" src="images/panda.jpg"
                width="150" height="115"></img></p>
        <div class="c2">
            <big><a href="Panda.html"><strong>Fiat Panda 1.2 5Dr:</strong></a></big><br></br>
            &pound;25.00 per Day<p>
                &pound;130.00 per week</p>
        </div>
    </div>
    <div class="modelContainer  petrol auto car">
        <!-- <a id="" href="focus.html" title="Auto. Focus 1.6" accesskey="1"></a>-->
        <p>
            <img align="right" alt="Automatic 1.6" id="image4foc" title="Automatic or Manual Focus 1.6"
                src="images/Focus.jpg" width="200" height="130"></img></p>
        <div class="c2">
            <big><a href="focus.html"><strong>Auto. Ford Focus 1.6:</strong></a></big><br></br>
            &pound;32.00 per day<p>
                &pound;175.00 per week</p>
        </div>
    </div>
   ...

JavaScript

$(document).ready(function () {
            var fuel = ''; // Keep track of selections
            var drive = '';
            var type = '';
            $('#fuel select').on("change", function () {
                fuel = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            $('#drive select').on("change", function () {
                drive = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            $('#type select').on("change", function () {
                type = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            function selectModels() { // Select matching models
                $('div.modelContainer').hide(); // Hide all
                $('div.modelContainer' + fuel + drive + type).show();
            }
        });