Ajax + jQuery combobox

Today I realised it's pretty usefull when one combobox can control the data of the second combobox. My problem -> I've never worked with Ajax before.

Currently working on the following webpage: http://194.247.30.66/~keizer/?ond=woningen

Try to use the comboboxes on the left.

My general question: I hate submit buttons, I hate a default look, how can I use Ajax to handle the data of the second combobox? For example: The first combobox contains a list of city's. When I select a city, it should automaticly change the data of combobox 2 (contains a list with housecategories).

When I select Echt in the first box, it SHOULDN'T let box2 show me some data wich ain't in my database.

Help this mindless noob please.

Data i've got:

    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.selectbox-0.1.2.js"></script>
    <script type="text/javascript">
    $(function () {
    $("#woonplaats").selectbox();
    $("#pandtype").selectbox();
    $("#vraagprijs_vanaf").selectbox();
    $("#vraagprijs_tot").selectbox();

    jQuery(function(){
        jQuery('ul.sf-menu').superfish();
    });

    $("#woonplaats").selectbox({

    onChange: function (val, inst) {
        $.ajax({
            type: "GET",
            data: {country_id: val},
            url: "ajax.php",
            success: function (data) {
 开发者_如何学Go               $("#boxCity").html(data);
                $("#city_id").selectbox();
            }
        });
    },
    effect: "slide"
});

    });
</script>

One problem I see is that in your test page you are not using #woonplaats in the javascript but #country_id which does not exist in your page.

In the code you posted, the problem is partly solved although you still have country_id: val which I guess should be woonplaats: val

(note that I´m not familiar with the selectbox plugin and its syntax).

Edit: I would start with changing all references to country_id to woonplaats and fix the errors in the html as that might lead to unexpected results.

The console in firebug gives me a javascript error (effectively halting all further processing...) on line 27 (jQuery("ul.sf-menu").superfish is not a function http://194.247.30.66/~keizer/?ond=woningen Line 27)

HTML validator for firefox gives me 93 warnings, mainly about unexpected opening and closing tags.