Three HTML select which options depend the previous

I'm trying to do three selects which display different options depending on the input from the previous one. They all get their options from a MySQL query.

The first select is always the same and never varies, the second one should check the answer provided in the first one and then display the corresponding answers and the third one should do the same put listening to the second select.

So far I've created the following code:

<?php
        $res = CommonFunctions::returnPrimario();
        foreach($res as $dato){
            echo '<option value = "' .$dato. '">' . ucwords($dato) .'</option>';
        }
    ?>
</select>
<select name = "secundario" id = "secundario">
    <?php
        $res = CommonFunctions::returnSecundario();
        foreach($res as $dato){
            echo '<option value = "' .$dato. '">' . ucwords($dato) .'</option>';
        }
    ?>
</select>
<select name = "nombre" id = "nombre">
    <?php
        $res = CommonFunctions::returnEjercicio();
        foreach($res as $dato){
            echo '<option value = "' .$dato. '">' . ucwords($dato) .'</option>';
        }
    ?>
</select>

Any help you can provide will be very much appreciated.

Thank you in advance.

Answers


You will need to put a listener on the select dropdown using javascript. "onchange" event will be appropriate e.g.

var primario = document.getElementById("primario");

// add event listener to the <select> tag
primario.addEventListener("change", function(){
    // function to determine the second dropdown
});

On determining the 2nd and 3rd dropdown, you can use either ajax to your server e.g.

primario.addEventListener("change", function(){
    var http = new XMLHttpRequest();
    var url = "yourpage.com/target/page";

    // send value of the first dropdown list
    var params = "primarioValue=" + this.value;
    http.open("POST", url, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    //Call a function when the state changes.
    http.onreadystatechange = function() {

        if(http.readyState == 4 && http.status == 200) {

            // Change the list of second dropdown 
            // provided your response is already wrap it in appropriate <option> tag
            document.getElementById("secundario").innerHTML = http.responseText;
        }
    }
    http.send(params);
});

Do the same for 2nd dropdown.

Another alternative is to store all options in javascript (JSON) and run the filtering logic in the event listener

I can suggest you to use jQuery to ease your process (but dont depend your life on it).

Hope it helps!


Need Your Help

UPNP and .NET CompactFramework

c# upnp coldfusion

Is there any upnp framework for CF .NET?

How to tailor existing MongoDB peacefully?

java mongodb morphia nosql

Supose i have a running mongodb instance(also using mongo sharding) with millions of data and thousand of transactions per second, and i have used morphia as my object-document mappe.