Cascading dropdowns

[laurie]

Hi

I want to create a form with drop downs that cascade the content of the next set of information from different tables. A make table and a model table

For example the first is the make of car. The second dropdown would automatically display only the model numbers for that make of car, and so on.

I know this can be done with a lookup field, but I really want to do this with dropdown fields.

Is there a known way of doing this.

Regards Laurie

[nekpap]

You can do this with nuAjax.

Onchange event in the first dropdown, call with nuAjax a php code (pass_mark_subject in my case) which gonna find the options you want to put into the second dropdown.
javascript function (pollute_subject) which nuAjax will call, will empty the second dropdown and polute it with the result of php code.

Code: Select all

function pollute_subject(param){
    $('#subject_id').empty();
    $('#subject_id').append('<option value=""></option>');
    if(!param==''){
        var ln = param.split('\n'); 
        for(i=0;i<ln.length;i++){  
            var fld=ln[i].split('\t');
            $('#subject_id').append('<option value="'+fld[0]+'">'+fld[1]+'</option>'); 
        }
    }
}

I use new line and tab to distinguish the data. You may pass the data with JSON.

Nektarios

[laurie]

Hi nekpap

First of all thanks very much for taking the time to answer my question. I am very new to this, and a little lost with interpreting your answer.

Would it be possible to give me a bit more detail with what goes where ? Which bit relates to the first dropdown and which bit to the second dropdown.

Could this be used for 3 or 4 cascading dropdowns to populate the options in them.

Regards
Laurie

[nekpap]

Hi Laurie,

First of all read how nuAjax works : http://wiki.nubuilder.net/nubuilderv3/i ... Name.5D.29

I will give a description of how to cascading dropdowns with nuAjax and JSON :

1) Create a form with the dropdows you want. In this example 2 dropdowns (car_make , car_model) but you can expand it to more dropdowns . Fill the first dorpdown and leave the second empty.

2) Create a php code (find_models) who gonna find car models when car make is speciffied :

Code: Select all

$sql="SELECT id,name FROM car_model WHERE car_make_id='#car_make#'";
$retval = nuRunQuery($sql);

$data_array =  array();
$nuParameters = '';

if($retval){
    while($row = db_fetch_row($retval)) {
        $data_array[]= $row;      
    }
    $nuParameters = json_encode($data_array);
}

3) Create a JavaScript function (pollute_models) and put it in the form under Custom Code -> Javascript

Code: Select all

function pollute_models(param){
    
    $('#car_model').empty();
    $('#car_model').append('<option value=""></option>');
    
    if(param!=''){
        var json_data = JSON.parse(param);
        
        for(var i=0; i < json_data.length;i++){  
            $('#car_model').append('<option value="'+json_data[i][0]+'">'+json_data[i][1]+'</option>'); 
        }
    }
}

4) In car_make dropdown under Events put Event Name -> onchange and Javascript ->

Code: Select all

nuAjax('find_models','pollute_models');

I Hope this gonna help you!

Nektarios