How to use drop down list ...

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
hayatu4islam
Forum Newbie
Posts: 1
Joined: Mon Nov 22, 2010 7:38 am

How to use drop down list ...

Post by hayatu4islam »

I wish to know how two other three drop down lists so that the second depends on the value of the first one likewise the third depends on the second one, please help out!.
phphelpme
Forum Contributor
Posts: 261
Joined: Sun Nov 21, 2010 3:32 pm

Re: How to use drop down list ...

Post by phphelpme »

Try this and change to your required names etc.

Code: Select all

<form>
<select id="car_name">
    <option value="car1">Car 1</option>
    <option value="car2">Car 2</option>
    <option value="car3">Car 3</option>
</select>
<select id="car_model">
</select>
</form>
<script type="text/javascript">
// Maps all available car models
var modelMap = {
    'car1': [
        // Each entry contains the model's ID and text/label.
        ['car1-1', 'Car 1.1'],
        ['car1-2', 'Car 1.2'],
        ['car1-3', 'Car 1.3']
    ],
    'car2': [
        ['car2-1', 'Car 2.1'],
        ['car2-3', 'Car 2.2']
    ],
    'car3': [
        ['car3-1', 'Car 3.1'],
        ['car3-2', 'Car 3.2'],
        ['car3-3', 'Car 3.3'],
        ['car3-4', 'Car 3.4'],
        ['car3-5', 'Car 3.5']
    ]
};

// Get the dropdown list elements.
var nameList = document.getElementById('car_name');
var modelList = document.getElementById('car_model');

// Function to be called when the car name is changed
nameList.onchange = function() {
    // Get the selected car.
    var selectedName = nameList.options[nameList.options.selectedIndex].value;
    // Lookup available models in the map.
    var availModels = modelMap[selectedName] || [];

    var i, opt;

    // Set available models in the model dropdown.
    for (i = 0; i < availModels.length; ++i) {
        opt = availModels[i];
        modelList.options[i] = new Option(opt[0], opt[1]);
    }

    // Remove all old options if the new car has fewer models than a previous selection.
    for (; i < modelList.options.length; ++i) {
        modelList.options[i] = null;
    }
};
</script>


adil
Forum Newbie
Posts: 6
Joined: Wed Oct 13, 2010 3:46 am

Re: How to use drop down list ...

Post by adil »

u can use ajax
Post Reply