Second select load from database after first one is selected

Question

I have 2 select items.

In the first one I'm loading the options from a MySQL database table using PHP.

The second one I want to load the fields from another table where for example category field equals the value of the item selected on the first tag.

I have no idea about how I can make the second select tag load the options dynamically. I know I need to use Ajax I guess.

I've found this, but it doesn't help too much since the options of the first select tag depend on what it can find in the database.

// Given the options in the first dropdown are: "foo", "bar", and "baz"
var secondData = {
    foo: ['lorem', 'ipsum'],
    bar: [1,2,3],
    baz: []
}

Then I need to add a 'change' event to the first dropdown, and given the value of that dropdown, load the contents of the second dropdown with the values contained in the secondData object, but I can't apply this.

Answer 1

If you want to get the values for the second dropdown from a database, then you do need ajax.

See this post:

Populate dropdown 2 based on selection in dropdown 1

A couple of other good posts re the basics of AJAX:

A simple example

More complicated example