CF7 Populate dropdown box based on selection of another dropdown

Any ideas, please?

Same question here. I′ve looked eveywhere and couldn′t find anything about this.

Like kenshin23, based on a selection in a dropdown menu, I need the next dropdown to show the options according to that. And so on.

At last, when the person submits, it should point to an email according to all those selections.

The features you are looking is called field dependency and currently CF doesn’t have any such thing built-in out of box.

I create a custom plugin with ajax call that intercept the id of the field and add this functionallity.
it’s not hard to do and help with this feature!

So you are going to develop such a plugin rospo85?

Great then, can′t wait to see it.

For the record, I ended up doing this with plain ol’ jQuery in the mean time, like this:

In CF7:

[select* vehicle-type id:cf7form-vehicle-type class:select-vehicle-type include_blank "Cars" "Trucks" "Bikes" "Buses" "Heavy Machinery"]
[select* vehicle-make id:cf7form-vehicle-make class:select-vehicle-make include_blank]
[select* vehicle-model id:cf7form-vehicle-model class:select-vehicle-model include_blank]

In js file included from template:

//Clean every select's options:
//Optional: fill first option with blank value.
function clearSelect(selector_str, fillBlank) {
	fillBlank = (typeof fillBlank === "undefined") ? true : fillBlank;

	jQuery(selector_str).empty();
	if(fillBlank) {
		jQuery(selector_str).append('<option value="">---</option>');
	}
}

//Functions for the form's selects:
jQuery(document).ready(function(){

    if (jQuery('#cf7form-vehicle-type').length > 0) {
        jQuery('#cf7form-vehicle-type').change(function(){
            jQuery('#cf7form-vehicle-make').attr('disabled','disabled');
            jQuery('#cf7form-vehicle-model').attr('disabled','disabled');
            clearSelect('#cf7form-vehicle-make');
            clearSelect('#cf7form-vehicle-model');
            var vehicle_type = jQuery('#cf7form-vehicle-type').val();

            jQuery.get(
                'select-ajax.php',
                {level: 'make', type_selected: vehicle_type},
                'json'
            ).done(function( data ){
                var optArray = JSON.parse(data);
                var select = jQuery('#cf7form-vehicle-make');
                var i;
                if(select.prop) {
                    var options = select.prop('options');
                }
                else {
                    var options = select.attr('options');
                }

                for (i = 0; i < optArray.length; ++i) {
                    options[options.length] = new Option(optArray[i], optArray[i]);
                }
            });
            jQuery('#cf7form-vehicle-make').removeAttr('disabled');
            jQuery('#cf7form-vehicle-model').removeAttr('disabled');
        });
    }

    if (jQuery('#cf7form-vehicle-make').length > 0) {
        jQuery('#cf7form-vehicle-make').change(function(){
            jQuery('#cf7form-vehicle-model').attr('disabled','disabled');
            clearSelect('#cf7form-vehicle-model');
            var vehicle_type = jQuery('#cf7form-vehicle-type').val();
            var vehicle_make = jQuery('#cf7form-vehicle-make').val();

            jQuery.get(
                'select-ajax.php',
                {level: 'model', type_selected: vehicle_type, make_selected: vehicle_make},
                'json'
            ).done(function( data ){
                var optArray = JSON.parse(data);
                var select = jQuery('#cf7form-vehicle-model');
                var i;
                if(select.prop) {
                    var options = select.prop('options');
                }
                else {
                    var options = select.attr('options');
                }

                for (i = 0; i < optArray.length; ++i) {
                    options[options.length] = new Option(optArray[i], optArray[i]);
                }
            });

            jQuery('#cf7form-vehicle-model').removeAttr('disabled');
        });
    }

    //Fill year select with series of years starting with current year + 1 to 1950
    if (jQuery('#cf7form-vehicle-year').length > 0) {
        var year_select = jQuery('#cf7form-vehicle-year'), year = new Date().getFullYear() + 1;
        if(year_select.prop) {
            var options = year_select.prop('options');
        }
        else {
            var options = year_select.attr('options');
        }
        do {
            options[options.length] = new Option(year, year);
            year--;
        } while(year >= 1950);
    }
})

Ajax-select.php (simplified):

<?php
//Data array included here:
require_once("vehicle-data.php");

//AJAX-provided values:
$level = (isset($_GET['level']) ? $_GET['level'] : "");
$type_selected  = (isset($_GET['type_selected'])  ? $_GET['type_selected']  : "");
$make_selected  = (isset($_GET['make_selected'])  ? $_GET['make_selected']  : "");

if( $level == "" ):
    echo json_encode(array("Error" => "Array level to return was not set."));
    return false;
endif;

if( $level == "make"):
    if( $type_selected == "" ):
        echo json_encode(array("Error" => "A necessary select option was not obtained."));
        return false;
    endif;
elseif ( $level == "model"):
    if( $type_selected == "" or $make_selected == "" ):
        echo json_encode(array("Error" => "A necessary select option was not obtained."));
        return false;
    endif;
else:
    echo json_encode(array("Error" => "Incorrect level set."));
    return false;
endif;

//Source array filtered to return requested data:
switch($level):
    case "make":
        $sublevel_array = $options[$type_selected];
        $return_data    = array_keys($sublevel_array);
        break;
    case "model":
        $sublevel_array = $options[$type_selected][$make_selected];
        $return_data    = array_values($sublevel_array);
        break;
    default:
        echo json_encode(array("Error" => "Array sublevel to return not set."));
        return false;
endswitch;

echo json_encode($return_data);
?>

I hope this helps someone. I know the code might not be the most efficient one, but it’s working ok so far.

Hi kenshin23.

I have looked at your code and I have some questions:

1. You put 3 selects: if I choose “Cars”, what happens with the other selects?

2. Where do I paste the code “In js file included from template”?

3. Where do you put Ajax-select.php?

Thanks.