TalkPHP - Zend framework, mysql and jquery dynamic select boxes

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Zend framework, mysql and jquery dynamic select boxes (http://www.talkphp.com/javascript-ajax-e4x/5987-zend-framework-mysql-jquery-dynamic-select-boxes.html)

Zend framework, mysql and jquery dynamic select boxes

I want to be able to change the value of the second select box based on the input in the fist select box.

As an example, if a person selects USA from the first select box they should only be able to choose from 'napa' or 'paso robles' in the second select box. If they click on France in the first select box they should only be allowed to choose from 'Bordeaux' or 'Provance' in the second select box.

Both select boxes are loaded from a mysql database, adding another layer of neck pain to the equation. I think this will require something like jquery and I'm just not any good at that.

I feel there is probably a really easy way to do this, but between my lack of real javascript skills and this being a zend framework form I'm just not sure how to trigger the database pulls to change the options in the second select box without reloading the page.

Help, anybody? Beuller... Bueller...

Setup an onchange event on the first checkbox. Use AJAX to load the values for the second checkbox depending on the value of the first checkbox. Populate the second checkbox with the data returned from AJAX.

jQuery would make it really easy to do. Here is something to get you started. I have not tested the code.

javascript Code:

$('#checkbox1').change(function() {
    var value = $(this).val(),
        checkbox2 = $('#checkbox2'),
        params = {};
        
    // make checkbox 2 show that it is loading and disable it
    checkbox2.html('<option>Loading...</option>').attr('disabled', true);
    
    // set values for ajax call
    switch (value) {
        case 'one':
            params.foo = 'one';
        break;
    
        case 'two':
            params.foo = 'two';
        break;
    }
    
    // make ajax call
    $.post('path/to/script', params, function(data) {      
        // set checkbox2 values and enable
        checkbox2.html(data).attr('disabled', false);
    });
});

BUHUWAHAHAHAHA! It's ALIVE!!! Worked like a champ. Thanks Bro.