Tie two select fields together based on category and subcategory?
You would need to implement a front-end solution of some kind using jquery and ajax, that listens to the .on('change') event on the select fields and loads the corresponding data from a template (i.e. '_cityState.html') using the selected city or state as post parameters; and then repopulate the other select field's options dynamically by setting the html of the select field to the return results.

Have a look at jquery's .on('change') event and $.ajax() and .html() methods for more information on the jQuery part.

In your ajax only '_cityState.html' template you would want something like this: (note: this assumes that cities and states have a 'code' field that will represent the drop-down option value, but modify as needed):

{% if craft.request.isAjax %}

    {# retreive the passed city or state code #}
    {% set city = craft.request.getParam('city') %}
    {% set state = craft.request.getParam('state') %}

    {% if city or state %}

        {% if city %}

            {# get all states; set the selected state to parent of 'city' #}
            {% set entries = craft.categories.group('locationCategories').limit(null).level(1) %}
            {% set selected = craft.categories.group('locationCategories).code(city).first().parent %}

        {% else %}

            {# get all cities that are a decendent of 'state'; set selected to first city #}
            {% set entries = craft.categories.group('locationCategories').limit(null).code(state).first().decedents(1) %}
            {% set selected = entries.first() %}

        {% endif %}

        {# build the return html #}
        {% for entry in entries %}
            &lt;option value={{ entry.code }} label="{{ entry.title }}" {% if entry == selected %}selected{% endif %}/&gt; 
        {% endfor %}

    {% endif %}

{% endif %}


Not tested. But should be pretty close. If anyone sees any errors, please edit or leave a comment.