Question

I want to ask quick question, i want to make a select drop down that when i choose one of the options the values of the other select drop down change …

let’s say i have select drop down called model that has the following

- Acura
- Aston martin
- Audi

I want when i choose (let’s say ) Audi, in the type select drop down i find Audi type’s only

- A3
- A5
- A4

I don’t want to use AJAX calls, i just want to use javascript or jquery to filter the data

thanks guys

Answer 1

Like Shomz said,

Assuming the dropdowns look like this:

    <!-- First dropdown. Make of car -->
    <select name='Manufactor' id='make'>
        <option value='null'>Select a Make</option>
        <option value='Audi'>Audi</option>
        <option value='BMW'>BMW</option>
        <option value='Volvo'>Volvo</option>
    </select>

    <br />

    <!-- Second dropdown. Model of car -->
    <select name='Model' id='model'>
    </select>

The javascript would look like this:

    <script type='text/javascript'>

    var model = ['','audi','bmw','volvo']; //Set makes
    model[1] = ['A3', 'A5', 'A4']; // Set Audi models
    model[2] = ['M3', 'M5', 'M6']; // Set BMW models
    model[3] = ['C30', 'C70'];     // Set Volvo models

    var test = model[1][1];

    function setModel(index) {
        var modelDropdown = document.getElementById('model');
        modelDropdown.options.length = null;
        for(var i = 0; i < model[index].length; i++) {
            modelDropdown.options[i] = new Option(model[index][i]);
        }
    }

    window.onload = function() {
        var makeDropdown = document.getElementById('make');
        makeDropdown.onchange = function() {
            setModel(this.selectedIndex);
        }
    }

    </script>

Notice that the Models start at index 1 and not 0, because the first option is a blank Select Model option.