jquery Ajax php array transfer in wordpress theme

I have a situation where i’d like one selectbox to change based on the selected option in another selectbox.

html could go:

<select name="gender-select" id="gender-select">
    <option value="girls">girls</option>
    <option value="boys">boys</option>
</select>

<select name="names" id="names">
    <option value="">Marie</option>
    <option value="">Rachael</option>
    <option value="">Lis</option>
</select>

So all the names would be stored in an SQL database. Lets assume that theres 10 names stored in total.

Then when the “boys” option is selected, the database should look up all the boys names in the database and feed those as options.

I know that i would use AJAX for this, and i have a setup of this that does do a successful request. My problem is that i need to pass the array of names into the function that handles the data, before sending it back to the javascript.

Im doing this in wordpress, and the process im thinking of would go like this (im sure there must be a better way – if not how would this be done? ):

1. php in the template would build an array via a custom loop.
2. javascript would take that array with the parameter of “boys”, and on select change pass the array and parameter on to functions.php
3. functions.php would then do its thing, to find all the boys names, and then send those back to javascript,
4. js will then display the new options

To me this seems silly converting php -> js -> php -> js

just to sort an array async.

What am i missing here?